CODEWITHSUNDEEP
htmlcsswordpressresponsive-design
pbu
pbu

Reputation: 3060

Logo and sitewide images refuse to be responsive

I am creating a simple wordpress theme for this website and style.css applied on this site.

i want all images to be responsive. I tried this code.

img {
max-width: 100%;
height: auto;
}

It is not working unfortunately. If you try to resize the browser, the logo and the image is not resizing according to browser width (unresponsive).

How do i fix this?

Sorry for being so naive, been working on this for 2 days, still cant seem to find a solution for this simple problem.

Upvotes: 0

Views: 55

Answers (3)

Kinna T
Kinna T

Reputation: 804

You can wrap the images in a div, with a media query for true mobile. Here I made a version that's three images across and turn into stacked images on mobile, resizing along the way: Example is here

<div class="image-wrap">
    <img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
    <div class="image-wrap">
    <img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
        <div class="image-wrap">
    <img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>

And the CSS: 

.image-wrap {
      max-width: 600px;
      width: 30%;
      margin: 2% 0 0 2%;
      overflow: hidden;
      position: relative;
      display: inline;
      float: left; }
    img {
      width: 100%;
      height: auto; }
    @media only screen and (max-width: 767px) {
      .image-wrap {
        width: 96%;
        max-width: 400px;
        display: block;
        float: none;
        margin: 0 auto;
        margin-top: 2%;}
    }

Upvotes: 0

Allen
Allen

Reputation: 304

For image tag write this css

img {
max-width: 100%;
height: auto;
width:100%;
}

And if you are using bootstrap in your theme then write this css

img {
max-width: 100%;
height: auto;
width:100%;
display:inline-block;
}

Upvotes: 0

Pepelius
Pepelius

Reputation: 1609

Instead of max-width: 100%; try the following:

img {
   max-width: 200px; /* Change this to what your logo is by its width */
   width: 100%;
   height: auto;
}

You can also set the max-width to be more than what your logo actually is, but of course it is suggested to keep it at high quality and in control.

EDIT: For sitewide images this of course does not work, since they all don't have the same width.

Upvotes: 1

Related Questions