Help me make product section alinged. URGENT!

Store Design
, ,
1

Hi I am launching my e-shop tomorrow (2EEST) and I can’t figure out how to make all product pages look the same (because of different picture sizes). Can you please help me with the CSS for how to make every product page look like this one https://matibrnd.com/products/naos-tee. Design origin top left and then the text below it and then the collapsible content. With the picture on he right. I will give 20 dollars. Thank youu

Pass: biangu

Url: www.matibrnd.com

MT27_0-1714505052952.png
MT27_0-1714505052952.png2114×768 172 KB

2

Add this code in your base.css file:

@media (min-width: 1540px) {
  .image-with-text__grid.grid.grid--gapless.grid--1-col.grid--3-col-tablet.image-with-text__grid--reverse {
    height: 600px;
  }

  .image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--18467719414027__5a87099c-deee-4c53-917e-331bd1dda3b7-padding {
    height: 490px !important;
  }

  div#ImageWithText--template--18467719414027__5a87099c-deee-4c53-917e-331bd1dda3b7 {
    height: max-content !important;
  }
}

Before:

problem.PNG
problem.PNG1333×844 101 KB

After:

result.PNG
result.PNG1338×862 114 KB

The rest of the product pages seem to be correct! :ok_hand:

3

Thank you very much, it worked for the big screen but when the desktop size gets smaller it becomes like this, can you please help me fix it

MT27_0-1714557303085.png
MT27_0-1714557303085.png1545×1054 123 KB

4

Add this code below the previous provided code:

@media (min-width: 1213px) and (max-width: 1539px) {
  #shopify-section-template--18467719414027__a8bd6c37-7476-45f3-b13e-29110c105a73 .grid.grid--1-col.grid--2-col-tablet.collapsible-content__grid.collapsible-content__grid--reverse {
    position: absolute;
    top: -460px;
    left: 18%;
  }
}

Any donation is welcome and if you have any other questions don’t hesitate to ask.

1 Like