Change a Section the Desktop version instead of mobile version

[NikosBat]

Hello guys, I have a question about the section below. How can I adjust this section to look the same as in the Desktop version?

Here is the mobile version

and here is the Dekstop version, which I want to look like this in mobile version

[AnneLuo]

Hi, @NikosBat 

Can you please share the store URL so that I can assist you?

[Dan-From-Ryviu]

Hi @NikosBat 

Please share your page link containing that section.

[DaisyVo · Accepted solution]

HI @NikosBat 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
.image-with-text__grid.grid > div {
    max-width: 50%;
}
.image-with-text--overlap .image-with-text__content {
    margin-top: 0;
    margin-left: -15%;
    width: 115% !important;
}
.image-with-text.image-with-text--overlap {
    padding-bottom: 35px;
}
}

Here is the result:

 

On mobile with a small horizontal screen, following the desktop design will look terrible. If you still want it, here's the code. However, if you reduce the height, the text in the right-hand box will need to shrink to fit, which would make it too small to read. Therefore, we suggest keeping it as it is.

 If you still want to make the edit, the code is above

I hope this helps,

Best,

Daisy

[NikosBat]

Hey DaisyVo, that worked for me thank you very much