Images in blog not scaling

[klaauw83]

I'm using the Balance theme but the large images in my blog posts are not scaling when I visit them on a mobile device. See (url). Is there a solution for this?

http://slaapwijzer.net/wp-content/uploads/2015/08/Voorbeeld1.png
http://slaapwijzer.net/wp-content/uploads/2015/08/Voorbeeld2.png

My websites are slaapwijzer.net and slankr.nl

Thanks a lot in advance!

William

[emasai]

Instead of posting screenshots, post a link to the actual page that is not resizing. I looked at your blog pages on Chrome for devices and they look fine, but I could not find the pages you are referring to.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[klaauw83]

Hi!

Thanks for your reply! These are the actual pages of the screenshots. The header is responsive but the other images not (tested on chrome and safari).

Ik kan niet slapen: 6 stappen om zo snel mogelijk in slaap te vallen

http://slankr.nl/review-vitadis-dieet-wonderprogramma-gebakken-lucht/

[emasai]

You have added inline styling to the page with set widths so the images are not scaling down. The second link has this in the html for the image that is not scaling

<div id="attachment_134" <strong>style="width: 611px"</strong> class="wp-caption aligncenter"><img class="wp-image-134 size-full" src="http://slankr.nl/wp-content/uploads/2014/05/Vitadis-dieet1.jpg" alt="Vitadis dieet" width="601" height="325"><p class="wp-caption-text">Een compleet overlevingspakket ;)</p></div>

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[klaauw83]

Hi Emasai,

Thanks for your help! I may be a very stupid man, but is it possible to tell me what I have to change in the code above (and other image codes) to make the images responsive?

Thanks!

William

[klaauw83]

Anyone a explanation for dummies how I can make the images in my blog posts responsive?

Thanks in advance!

[emasai]

If you go into your post and delete the extra code that is in there, the image will scale. This is the part you need to delete for the first image that is too wide in http://slankr.nl/review-vitadis-dieet-wonderprogramma-gebakken-lucht/

<strong>style="width: 611px"</strong>

Wherever you have images that do not scale remove the style="width: ???px" part, this is making the images stay at that size and not scale down.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[klaauw83]

Thanks a lot! The image codes I see in my posts are slightly different:

[caption id="attachment_134" align="alignnone" width="601"] Een compleet overlevingspakket :)[/caption]

When I delete: width="601"

[caption id="attachment_134" align="alignnone" width="601"] Een compleet overlevingspakket :)[/caption]

The images becomes responsive, but the caption is gone on mobile devices (not on my desktop). What am i doing wrong?

Hope you can help me one more time!

[emasai]

How are you adding the photos and the caption?

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[klaauw83]

I add the images and the captions with the 'add media' button in the editor.

[emasai]

I'm sorry I don't know what is causing your problem. I suggest you submit a support ticket to Studiopress and cite this post.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[klaauw83]

Thanks anyway! I received this reply. Maybe helpful for other people:

There is a <div> that's put around a picture that includes the caption. This <div> has an set width inline that cannot be written over with a custom style. The best way to do this is to remove the caption from the actual image and put it under the image inside your post.

In your Text tab (not the Visual tab), you can insert the image and then put your caption text inside the following <p> tags so it would look like this:

<p class="wp-caption-text">Teveel koolhydraten zorgen ervoor dat het lichaam geen reden heeft om vet te verbranden</p>

That will allow the image to resize and also for the caption text to resize as well.

[Author]

Posts