Make mobile logo bigger and move

Store Design
, , , , , , ,

Topic summary

A user seeks to enlarge their mobile logo and extend both the logo and contact button to full page width on mobile devices.

Solutions Provided:

Three community members offered CSS code snippets targeting mobile viewports (max-width: 749px or 768px):

  • Dan-From-Ryviu: Suggested adding CSS to Custom CSS in Theme settings to adjust header padding and logo wrapper width
  • GTLOfficial: Recommended inserting code into base.css file, modifying logo wrapper width and heading link padding, and included a visual result screenshot
  • DaisyVo: Provided CSS targeting header padding and logo image width (200px), also with a result screenshot

Implementation:

All solutions involve adding custom CSS through either:

  • Theme Customizer > Theme Settings > Custom CSS (recommended by 2 respondents)
  • Direct code editing in base.css file

The discussion remains open with multiple viable approaches offered but no confirmation from the original poster on which solution was implemented or successful.

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

Hi,

I want to make my mobile logo bigger

and also move the logo and the contact button full width of page on mobile

my site is https://eftfkw-vc.myshopify.com

81B6FA20-56F5-4BC1-AD5A-6A4FA709AC23.jpeg
81B6FA20-56F5-4BC1-AD5A-6A4FA709AC23.jpeg1170×2532 132 KB

2

Please add this code to Custom CSS in Online Store > Themes > Custmize > Theme settings

@media (max-width: 749px) {
html .header {
    padding: 8px 2rem 6px 1rem;
}
html .scrolled-past-header .header__heading-logo-wrapper {
    width: 100%;
}
}
3

Hello @Luxurymrkt
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media (max-width: 749px) {
  html .scrolled-past-header .header__heading-logo-wrapper {
    width: 100% !important;
  }
  .header__heading-link {
  padding: 0rem !important;
}
}

result

125.png
125.png404×690 16.1 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @Luxurymrkt

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
header.header {
    padding-inline: 0 !important;
}
.header__heading-logo-wrapper img {
    width: 200px !important;
    max-width: unset !important;
}
}

Here is the result:

image_360.png
image_360.png335×360 17.9 KB

I hope this helps

Best,

Daisy