How to amend layout of information block in header on mobile view please

Store Design
1

Good Evening,

I am using Shella theme and I have an information header block on my site. It seems that the layout for this is perfect on desktop view as per the screenshot below:

Screen Shot 2021-11-21 at 21.18.58.png
Screen Shot 2021-11-21 at 21.18.58.png2880×1800 978 KB

However, when I change to mobile view, the layout / text in this header block messes up and does not look good. Please see screenshot below:

Screen Shot 2021-11-21 at 21.18.52.png
Screen Shot 2021-11-21 at 21.18.52.png2880×1800 400 KB

Please could anybody advise on how I can amend this on mobile view and ensure it looks as good as desktop view?

URL: https://endless-retro-22.myshopify.com/

Thank you in advance,

2

@Endlessretro

sorry are you facing issue but how can i check your store is password protect

3

@KetanKumar password removed, thank you

4

Hi @Endlessretro ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.min.css and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
	.home-builder .slick-list{
		height: 450px !important;
	}
	.home-builder .slick-track,
	.home-builder .promobox,
	.home-builder .promobox a,
	.home-builder .image-animation,
	.home-builder .rimage {
		height: 100% !important;
	}
}

Hope it helps!

5

@LitExtension Hello

Thank you for the code however unfortunately I followed your steps and it didn’t change the block in the header.

Please could you advise?

Thank you

6

Hi @Endlessretro ,

Is this not what you want? https://i.imgur.com/RY59onb.png

Do you want to reduce your height? https://i.imgur.com/u0OcICb.png

If so, you just need to change 450px => 325px

Hope it helps!