I am trying to change the ‘image with text section’. I wish to have the image on the left side and the text next to it on the right side however the text is too big and so keeps changing the size of my image so that half of it can’t be seen. Is there a way to make the font size smaller so that it fits next to my image and stops the image size from changing?
Topic summary
Issue: In the Image with Text section of a theme being customized (not yet published), the body text is too large, causing the adjacent image to resize/crop so part of it isn’t visible. The goal is to reduce the body text font size so it fits beside the image without affecting the image size.
Context: A site URL was shared, but helpers couldn’t see the section because the changes are in an unpublished theme.
Attempts: A general suggestion to use CSS (font-size: 20px) was made. The change only affected the title, not the body text, since both are in the same section but require different selectors.
Latest actionable guidance (code snippet central to the solution): Add targeted CSS in the Custom CSS for the Image with Text section to change only the body text size:
.image-with-text .image-with-text__text { font-size: 16px; }
Outcome/Status: A specific selector-based CSS fix was provided to adjust body text without altering headings, which should prevent the image from resizing. No confirmation from the original poster yet; resolution appears pending.
Note: CSS (Cascading Style Sheets) controls the visual styling (e.g., font sizes) of page elements.
site url is https://www.gladstonevineyard.co.nz/
Hi @gladstonewine ,
Did you remove the image with text section? I only see the rich text, banner and featured products sections. If your familiar with the coding you can use font-size: 20px(change the size that you like).
It is for a theme I am customising in the back end, I have not yet published it. Are you still able to help me without having published it?
the coding works, however it is inly changing the title font size rather than the font size of the body text and as they are in the same section i do not know how to change the font size of the body text
Copy this into the Custom CSS for the Image with Text section and just change 16 px to whatever size you want.
.image-with-text .image-with-text__text {
font-size: 16px;
}