brine-template Vertical Line in Mobile view

Site URL: https://kinjaltrivedisite.squarespace.com/

Site PW: kinjal

I have added a vertical line between two text blocks with a code block but it doesn't look right on the mobile view. It overlaps the text (screen shot attached) Can someone  Pls help. Thank you.

Hi,

You can add a media query to adjust the height on smaller screens. Add this to your Custom CSS.

@media only screen and (min-width: 600px){
	.vl {
		height: 50px;
	}
}

On 2/7/2022 at 3:33 PM, meganheath said:

You can add a media query to adjust the height on smaller screens. Add this to your Custom CSS.

@media only screen and (min-width: 600px){
	.vl {
		height: 50px;
	}
}

 

Hi Megan,

I did add this but it didnt change anything. Any more ideas? I have attached a screen shot of the code and how it still looks.

Hi @atfirstblink

Oops, sorry. It should have been max-width, not min-width 🙂 Here you go...

@media only screen and (max-width: 600px){
	.vl {
		height: 50px;
	}
}

worked perfectly, thanks a ton! 🙂