How to Change Logo Size for Mobile Only

  • Hello,

    I am happy with my logo size for desktop browsing but it is far too large for mobile browsing.

    I understand only some CSS and would appreciate help in understanding how to make the logo smaller for only the mobile browsing.

    • This topic was modified 5 years, 2 months ago by Jan Dembowski. Reason: Moved topic to Fixing WordPress

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

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

  • Hello, @mylifesaholiday

    You can add this following CSS code to change your logo size on mobile.

    @media screen and (max-width: 640px){
.header-logo img {
width:50%!important;
margin:auto;
padding:auto;
}
}
    • This reply was modified 5 years, 2 months ago by tenzinchoenyi.
    Thread Starter mylifesaholiday

    (@mylifesaholiday)

    Thank you so much Tenzin, I really appreciate your help.

    Just out of curiosity, I’m wondering how that CSS affects the logo on mobile but keeps the desktop the same. I’m still learning CSS so would like to understand the code you sent a bit more if you have time to explain.

    Thank you again for your help!

    Hello

    I am using media queries for the responsive website on any device such as a mobile, tablet, etc.

    /* It means on screens that are  640px or less, set logo image width 50% and margin and padding auto means on center.*/

@media screen and (max-width: 640px){
.header-logo img {
width:50%!important;
margin:auto;
padding:auto;
}
}

    You can check on following links more about media queries.
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp
    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Change Logo Size for Mobile Only’ is closed to new replies.