how do i make the mobile logo bigger?

  • hello there! on my website… [ redundant link removed ] … i am trying to make the mobile logo bigger, the desktop and the ipad version is looking good but on the iphone 6 or 5 it is too small… i dont understand why the css which is the same for both desktop and ipad is not working …

    here is the additional css:

    /*Logo Size*/
         .woocommerce-active .site-header .site-branding img {
          max-width: 60%;
					 margin:0 auto;
          }
          
          @media screen and (max-width: 768px) {
.woocommerce-active .site-header .site-branding img {
          max-width: 80%;
          }
}

@media screen and (max-width: 375px) {
.woocommerce-active .site-header .site-branding img {
          max-width: 80%;
          }

}

@media screen and (max-width: 320px) {
.woocommerce-active .site-header .site-branding img {
          max-width: 80%;
          }

}

/*Logo center*/

.site-branding {
		text-align: center;
		margin: 0 auto !important;
		float: none !important;
	}

/*Page title*/

.entry-title{
  text-align:center;
	font-weight: 500;
	padding-bottom: 50px;
}

/*remove certain page titles*/
.page-id-293 .entry-title{
display:none;
}

/* Remove search widget from header */
.widget_product_search form {
  display: none;
}

/*Navbar*/
.woocommerce-active .site-header .main-navigation{
   width:100%;
	 padding-left: 100px;
}

    and is there a way to force the ipad version to use the handheld navbar?

    • This topic was modified 4 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi!
    I just notice the following CSS code: 

    
.site-branding {
    float: left;
    margin-bottom: 0;
    width: calc( 100% - 120px);
}

    If you want to make the logo bigger (80% width) you can make the site-branding 100% width.

    You code for this will be something like this: 

    

 @media screen and (max-width: 768px) {
.site-branding {
    width: 100%;
}
}

    If it’s not working you can try to add !important

    Hope this helps ??
    Regards

    Thread Starter richo20

    (@richo20)

    thank your very much! that worked!

    is there a way to force the tablet (ie ipad) to use the collapsed handheld menu like the mobile version?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘how do i make the mobile logo bigger?’ is closed to new replies.