How to change the logo size for mobile header?

Store Design
, , ,

Topic summary

A user with a third-party theme (luxoptions.com) needs to reduce the mobile header logo size but lacks the typical theme.scss.liquid file, only having styles.css.liquid available.

Initial Solutions Attempted:

  • MandasaTech provided CSS code targeting .mobile-header__logo .image-element-wrap img with a max-width of 110px
  • This caused unintended issues: broke the main page layout and disrupted how products display on mobile
  • A revised code snippet was offered targeting the same element more specifically

Alternative Approaches:

  • GemPages support recommended adding custom CSS in a <style> tag within the theme.liquid file (before </head>), with visual instructions provided via screenshot
  • PageFly-Victor suggested adding CSS to styles.css targeting #mobile-header .mobile-header__logo with 50% width using a media query for screens up to 767px

Current Status: The discussion remains open with multiple CSS solutions proposed but no confirmed resolution from the original poster after the layout issues occurred.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi, how do I change the size of the header on mobile only? I do not have a theme.scss.liquid, only a styles.css.liquid. My website is www.luxoptions.com and I have a third party theme. Thanks for any help you can provide.

2

Hello @luxoptions

Go to Online store >> Edit code >> Assets >> styles.css
Add this code below of styles.css file

@media(min-width: 280px) and (max-width: 767px){
.image-element__wrap img {
max-width: 110px !important;
}
}

3

it has messed up the main page slideshow now though

@MandasaTech

4

also this has messed up the way my products are presented on mobile @MandasaTech

5

@luxoptions

Go to Online store >> Edit code >> Assets >> styles.css
Add this code below of styles.css file

@media(min-width: 280px) and (max-width: 767px){
.mobile-header__logo .image-element__wrap img {
max-width: 110px !important;
}
}

6

Hello @luxoptions ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1670231880503.png
GemPages_0-1670231880503.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1670231979079.png
GemPages_1-1670231979079.png1912×903 70.4 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

7

Hi @luxoptions ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets → styles.css

@media (max-width: 767px) {

#mobile-header .mobile-header__logo {

    width: 50%;

}

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly