Community Forums › Forums › Archived Forums › Design Tips and Tricks › Images in blog not scaling
- This topic has 11 replies, 2 voices, and was last updated 8 years, 8 months ago by klaauw83.
-
AuthorPosts
-
August 13, 2015 at 8:27 am #162248klaauw83Member
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.pngMy websites are slaapwijzer.net and slankr.nl
Thanks a lot in advance!
William
August 13, 2015 at 12:20 pm #162270emasaiParticipantInstead 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.comAugust 13, 2015 at 1:37 pm #162284klaauw83MemberHi!
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).
http://slaapwijzer.net/ik-kan-niet-slapen-zes-stappen-om-snel-in-slaap-te-vallen/
http://slankr.nl/review-vitadis-dieet-wonderprogramma-gebakken-lucht/August 13, 2015 at 2:07 pm #162289emasaiParticipantYou 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.comAugust 13, 2015 at 3:34 pm #162307klaauw83MemberHi 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
August 14, 2015 at 7:57 am #162361klaauw83MemberAnyone a explanation for dummies how I can make the images in my blog posts responsive?
Thanks in advance!
August 14, 2015 at 8:53 am #162369emasaiParticipantIf 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.comAugust 14, 2015 at 9:17 am #162371klaauw83MemberThanks 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!
August 14, 2015 at 10:02 am #162379emasaiParticipantHow are you adding the photos and the caption?
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comAugust 14, 2015 at 10:57 am #162389klaauw83MemberI add the images and the captions with the 'add media' button in the editor.
August 14, 2015 at 3:12 pm #162418emasaiParticipantI'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.comAugust 16, 2015 at 10:27 am #162531klaauw83MemberThanks 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.