Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I’d set a 480px or smaller media query to float: none; the image.
Wow that was fast, thank you for your response. can you please read the updated version of my quandry?
I was under the assumption that media querries only effected background images but not inline img tags, or embeded img tags.??
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I think that assumption is wrong, Twenty Twelve uses a mixture of block and inline elements with media queries. Try searching your Twenty Twelve stylesheet for “media” and see what I mean.
Can you change the float from left to none, on a image that is embedded in a post,and gets its float left property from .alignleft which is located in the style.css in the parent theme by using a media querrie?
here is what i used:
@media screen and (max-width: 480px) {
.alignleft {
float: none;
}
}
I have this added in the style.css file in my child theme.
I have also added a id to the html in the body of the message that assigns the .alignleft to the element an tried to use the id to change the propertie as well.
Thank you Andrew, You kept me trying and I see the errors in my ways, so now it works. Let me perfect the exact breakpoints locally and then add them to my site. Then I will set this as resolved.
thanks again
henryLemmon>
I can make the queries work localy but when I upload the changes to the server they do not show on the site
This is what I have at the end of the style.css file in my child theme:
/* To make my front page respond correctly to various screen sized with the p wrap
--------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
.alignleft {
float: none; !important
}
}
@media screen and (min-width: 600px) and (max-width: 750px) {
.alignleft {
float: none; !important
}
}
it works localy but not when I change the style.css on the server in bluehost.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your CSS syntax is slightly wrong, but I don’t think you want to be applying the style to alignleft. This’ll probably affect everything that has the class alignleft, not just the image you want.
Try this CSS instead;
@media screen and (max-width: 480px) {
.entry-content img {
float: none;
}
}
I made the recommended changes to the file, but it still only works local.
I will get on the horn with bluehost and see if they have any idea what is going on.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Whereabouts are you adding the CSS?
to the bottom of the style.css located in my child theme
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Looks okay, no syntax errors in your CSS. Let us know what your hosts say about it.
Edit: Also, try disabling plugins to explore whether any could be responsible.
The host got me on hold as he refers the issue to there css tech, and I will disable plugins to see what effect that has.
be back!
henrylemmon>
