HOW TO AMEND LAYOUT OF INFORMATION BLOCK IN HEADER ON MOBILE VIEW PLEASE.

Endlessretro
Trailblazer
172 0 64

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

 

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

 

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,

Replies 5 (5)

KetanKumar
Shopify Partner
36839 3635 11972

@Endlessretro 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Endlessretro
Trailblazer
172 0 64

@KetanKumar password removed, thank you

LitExtension
Shopify Partner
4860 1001 1133

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Endlessretro
Trailblazer
172 0 64

@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

LitExtension
Shopify Partner
4860 1001 1133

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify