Hi all,
Apologies in advance for the newbie question. I’ve spent several fruitless hours on Google and searching these forums, but I can’t find an answer to what I imagine is my very simple question.
On my WordPress site (http://kevin-griffith.com/) the imagine is not responsive on mobile. I’d like it to expand to take up the entire width of the phone screen and be a single column. But for some reason when I put the image and text inside of a Pagebuilder layout, it’s not responsive!
Any ideas?
Hi Kevin
Thanks for reaching out.
If you insert the same content into the Classic Editor (Visual Tab) the result will most likely be the same. Your image has an inline style of
float: left;, there isn’t a rule to change that for mobile so your image floats left on all resolutions. Your image is also300px x 300pxas inserted so it won’t ever be wider than that.If you are ok with your text not wrapping then you could use a SiteOrigin Image widget in the left column and a SiteOrigin Editor widget in the right column. You’ll need to have the SiteOrigin Widgets Bundle installed to make use of these widgets. Here is how it would look, the image would be inserted at full size or large size.
https://imgur.com/a/0am29AH
If you want the text to wrap around the image then you can insert your image and text into a SiteOrigin Editor widget. Click on the image to edit its settings and align it left. However, most themes won’t change the left alignment on mobile so your image will be left-aligned on all devices. We could assist with the Custom CSS necessary for a change like this within our premium support scope. It’s unfortunately, beyond what we’re able to offer here on the forums.
Hopefully, this helps to explain what’s happening.