Hi
I would like to make my logo (in header) bigger, but just in mobile view.
I’ll be thankfull for any help. 
Store ID: https://wirelessrevolution.net/
Topic summary
A user wants to increase their logo size in the header, specifically for mobile view only.
Three solutions were provided using CSS:
-
PageFly-Amelia’s approach:
- Edit
base.cssfile in theme code - Add media query targeting max-width 767px
- Set logo wrapper image max-width to 250px
- Edit
-
BSSCommerce-TC’s method:
- Similar approach editing
base.css - Uses max-width 750px breakpoint
- Sets header logo height to 22px and max-width to 200px
- Similar approach editing
-
Dan-From-Ryviu’s solution:
- Add code via Theme Customizer > Custom CSS (easier access)
- Targets max-width 749px
- Adjusts grid template columns
All solutions use CSS media queries to target mobile devices specifically. The discussion remains open with no confirmation from the original poster about which solution worked.
Hi @UL1
This is Amelia from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.header__heading-logo-wrapper img {
max-width: 250px !important;
}}
Hope that my solution works for you.
Best regards,
Amelia | PageFly
1 Like
Hi @UL1 ,
You can follow these steps
Step 1: Go to Online store > Themes > Edit code and find base.css file
Step 2: Insert below code at the end file and Save them
@media (max-width: 756px) {
.header__heading-logo {
height: 22px;
max-width: 200px;
}
}
it would be like that
2 Likes
Hi @UL1
Please go to Online Store > Themes > Customize > Theme settings > Custom CSS, add this code and save
@media (max-width: 749px) {
.header { grid-template-columns: 1fr 4fr 1fr !important; }
}
1 Like