Jump to content

Align image to text (product, additional information)

Recommended Posts

  • Replies 7
  • Views 446
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

@media screen and (min-width:768px) {
div#item-6289297efc50d7002b4a9eb5 .span-12>.row {
    display: flex;
    align-items: flex-start;
}
}
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1661422088021_7314 {
    top: -830px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/28/2022 at 9:34 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width:768px) {
div#item-6289297efc50d7002b4a9eb5 .span-12>.row {
    display: flex;
    align-items: flex-start;
}
}
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1661422088021_7314 {
    top: -830px !important;
}
}

Thanks for the answer! 
How do I make this not dependent on Block ID? 
I would like to use this particular change in Mobile View where the image is on top of the text on ALL my future product pages, also it does not work when I add more information to the text-box above the image (the product details excerpt box), since that would essentially overlap with the image the more information I add. 
How do I fix this?

 

Edited by at17c
To specifiy
Link to comment
2 hours ago, tuanphan said:

All products will use same layout

Left text - right image

or different? If different, can you describe?

On desktop it will be text on the left, image on the right. 
On mobile it will be; image on top, text on the bottom. 
The image and the text will be the same for at least the next 10 products (they will be different prints on the same t shirt) but after that I might change both image and text, but the layout will be the same. 
TIA

Link to comment
On 8/31/2022 at 4:51 PM, at17c said:

On desktop it will be text on the left, image on the right. 
On mobile it will be; image on top, text on the bottom. 
The image and the text will be the same for at least the next 10 products (they will be different prints on the same t shirt) but after that I might change both image and text, but the layout will be the same. 
TIA

Approximately how many different layouts will you need? My idea is to create more sections in the Footer, attach tags to these products, then use the code to cut the section in the footer and insert it in the products accordingly.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/3/2022 at 10:54 AM, tuanphan said:

Approximately how many different layouts will you need? My idea is to create more sections in the Footer, attach tags to these products, then use the code to cut the section in the footer and insert it in the products accordingly.

Thanks for getting back! 
So, the layout of the page will be the same - no matter what product it is. 
My business sells hand-printed t-shirt based on the same blank t shirt, so therefore what I would like to is to just duplicate the previous product whenever I create a new print, so that the bottom layout remains the same (the specifications of the t shirt etc.), but then I just write a new excerpt and change the product images. 
Layout should be the same. 
Thanks. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.