Hello, can someone please help me position my images on the left side of text in featured collections for Express Theme.
Here is an image, I would like the pictures of chicken to be on the left side of the text:
I have some knowledge of CSS and HTML but I cannot figure it out, any help would be appreciated
Hello tkirschenheiter!
For images to be side by side on one line you need to change their display property. They might be displaying as “block” level elements by default in your theme and these don’t allow other elements to sit in the same row by default. The way to change that is to set their display property to “inline-block” using CSS.
As for adding spacing, that is usually accomplished by setting margins via CSS. You can similarly set maximum heights and widths to images using CSS. Here is an example of how it could look
.rte img {
display: inline-block;
height: 250px;
width: auto;
margin:10px;
}
If you add the above code to the bottom of your main CSS file for your theme then it should change the images to sit inline, add spacing around image elements and force them to have a specific height. Just be mindful that you will probably want to play around with the above numbers. Also, this code will affect all images added inside of a rich text editor. That means all pages, products and collections. If you want it to be more specific, like only target pages, you could try this too
.template-page .rte img {
display: inline-block;
height: 250px;
width: auto;
margin:10px;
}
Alway Remember back up your theme by duplicating it before implementing any changes in code
Hope its helps you
Thanks
Solutions1
Hi @tkirschenheiter ,
Please follow the steps:
Step 1: Go to Online store > Themes > Actions > Edit code.
Step 2: Go to Asset > theme.min.css and paste this at the bottom of the file: https://i.imgur.com/nTQQbFI.png
.product-card__image-wrapper{
order: initial;
margin-left: 0;
margin-right: 3rem;
}
Hope this helps!
