How to make custom liquid section responsive

Store Design
1

Hi all!

I’ve created a custom liquid section on the front page of my site, but unfortunately can’t work out how to make it responsive for mobile without it overlapping or messing with the section below. Any pointers on what I could add to the code would be greatly appreciated!

Here’s the link to the site: https://dpburrf800lto8jy-5312249.shopifypreview.com

Thank you in advance,

Oscar

1 Like
2

@Osc_M

oh sorry for that issue but i can’t see that section can you please show me

3

Hi @KetanKumar , thank you for getting back to me.

Apologies for not making it clearer, I meant to attach an image to illustrate but forgot.

The section I am struggling with it the ‘How to find Us’ part of the page.

Screenshot_20220523-082331_Chrome.jpg
Screenshot_20220523-082331_Chrome.jpg1079×588 82.7 KB

Many thanks,

Oscar

1 Like
4

@Osc_M

no rush thanks for the update can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 749px) {
#shopify-section-template--15511985160372__16529523570e225654 .container {width: 100%;}
#shopify-section-template--15511985160372__16529523570e225654 .container div {width: 100%;padding: 0;margin: 0;height: auto !important;}
#shopify-section-template--15511985160372__16529523570e225654 .container div iframe {width: 100%;height: 100% !important;}
img {max-width: 100%;}
}
1 Like
5

Hi @Osc_M ,

Go to Assets > base.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
	.section-template--15511985160372__16529523570e225654-padding .container,
	#st-box,
	#st-box img,
	#nd-box,
	#nd-box iframe,
	#rd-box  {
		max-width: 100% !important;
		float: left !important;
		margin-left: 0 !important;
	}
	.section-template--15511985160372__16529523570e225654-padding .container {
		height: auto !important;
	}
}
1 Like