Solved

Resizing Logo for Mobile View

technase
Shopify Partner
110 1 25

I require help in resizing the logo for the mobile view of my website. The logo isn't an image, its just the text (shop name). Right now, the name doesn't fit on the screen (mobile screen) in one line, and I want to make it small enough so it fits in one line.

Any help is greatly appreciated 

Shop URL: https://studiohafnia.dk/
Theme name: Impulse 

WhatsApp Image 2024-05-08 at 9.50.31 AM.jpeg

technase
Accepted Solutions (2)

techlyser_web
Shopify Partner
1503 278 298

This is an accepted solution.

Hello @technase 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 768px) {
   .site-header__logo a {
       max-width: 100% !important;
   }
  .site-header__logo {
       font-size: 22px !important;
       right: 26px;
   }
}
</style>

techlyser_web_0-1715145882315.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@technase Please follow below steps to resize the logo for mobile view to fit on one line. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" section and paste the below code in the "Custom CSS" field and save changes.

 

@media only screen and (max-width: 768px) {
  .header-item--logo .site-header__logo a {
      max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .header-item--logo .site-header__logo a {
      font-size: 22px !important;
  }
}​

 

 

Vinsinfo_1-1715148302365.jpeg

Vinsinfo_1-1715149675538.png

 

Result will be like,
Vinsinfo_4-1715148370239.jpeg

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 4 (4)

techlyser_web
Shopify Partner
1503 278 298

This is an accepted solution.

Hello @technase 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 768px) {
   .site-header__logo a {
       max-width: 100% !important;
   }
  .site-header__logo {
       font-size: 22px !important;
       right: 26px;
   }
}
</style>

techlyser_web_0-1715145882315.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@technase Please follow below steps to resize the logo for mobile view to fit on one line. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" section and paste the below code in the "Custom CSS" field and save changes.

 

@media only screen and (max-width: 768px) {
  .header-item--logo .site-header__logo a {
      max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .header-item--logo .site-header__logo a {
      font-size: 22px !important;
  }
}​

 

 

Vinsinfo_1-1715148302365.jpeg

Vinsinfo_1-1715149675538.png

 

Result will be like,
Vinsinfo_4-1715148370239.jpeg

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Anshul_arora
Navigator
382 110 77

Hello @technase ,

I understand you are looking to resize the logo for mobile screens.

The below mentioned CSS code can assist you in automatically resizing logo size as per the mobile screen.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

@media screen and (max-width: 768px){
.site-header__logo a {
max-width: fit-content !important;
}
}

</style>


Output -:

Anshul_arora_0-1715148479664.png

 



I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

PageFly-Richard
Shopify Partner
4287 973 1627

Hi

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 767px) {
   .site-header__logo a {
       max-width: 100% !important;
   }
  .site-header__logo {
       font-size: 20px !important;
       right: 26px;
   }
}
</style>

PageFlyRichard_0-1715150326114.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.