CODEWITHSUNDEEP
jqueryhtmlcsswordpress
Kushal Meena
Kushal Meena

Reputation: 3

How to resize logo size for mobile version of wordpress website?

I've been trying to resize the logo of our site ( https://jodhpurhomeservices.com/ ) when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:

@media (max-width: 360px) {
    .site-branding img {
        max-width: 50%;
        max-height: 50%;
    }
}

I'm not sure what to adjust or which CSS code should I use? And I don't really want to change anything on desktop view. Just mobile.

Will appreciate any feedback.

Upvotes: 0

Views: 3107

Answers (4)

Tristup
Tristup

Reputation: 3663

Try the following code for different screen size.

@media (max-width: 767px) {
  .site-branding a img {
      width: 50%;
   }
}
@media (max-width: 360) {
  .site-branding a img {
      width: 23%;
   }
}

You may not need the 767px code, but a the above code will decreasing the width in percentage (%) it will look odd in 767px when in that screen size.

Upvotes: 0

Ravinder Singh
Ravinder Singh

Reputation: 84

I think it should but your above styles doesn't seems applying https://jodhpurhomeservices.com/ you can improve media query as below

@media only screen and (max-device-width: 480px) {

}

And are you sure your css as uploaded because I tried here https://jodhpurhomeservices.com/wp-content/cache/autoptimize/css/autoptimize_8c2977c29238748881af21a29e97e157.css but I doesn't find media query for site-branding.

Upvotes: 0

Arun Sharma
Arun Sharma

Reputation: 1331

Your website seems to use an optimization plugin, consider clearing cache after adding your CSS code to custom CSS section or theme's CSS file to see the effects.

You just need to define width or max-width, height can be taken care of automatically.

@media (max-width: 360px) {
    .site-branding img {
        max-width: 50%;
        height: auto;
    }
}

Upvotes: 1

Anmol Sandal
Anmol Sandal

Reputation: 1488

The code looks fine. It will work only for the resolution below 360px or you can update it to 767 if needed because below resolution of ipad it's only mobile. SO you don't need to add max-height. Only this code will help you out. You can update resolution of your choice. And i checked your website this css code was not there.

@media (max-width: 767px) {
  .site-branding img {
    max-width: 50%;
  }
}

Upvotes: 0

Related Questions