Shopify themes, liquid, logos, and UX
Hello,
I am using them Supply, the height of header is too big, so after digging here, I add to the bottom of theme.scss.liquid file.
.site-header {
height:240px;
padding:0;
}
I set the logo size in customize screen is 150px.
The problem is:
1) When view in computer, the position of logo is a bit higher, I want to be a center-vertical.
2) When view in mobile, it affects on "Announcement line", the position of "Announcement line" is not nice, a bit lower, how to be a center-vertical.
3) If change the value of Height:240px to Height:200px (to reduce the height as much as possible), when view in mobile device, it NOT show the slideshow (now shows 3 pictures).
My URL: mimocity.ca
Pass: yatwee
Any suggestion, thanks in advance.
Solved! Go to the solution
This is an accepted solution.
Dear Pallavi and MS-WEB-Designer,
Both of codes work for me, thank you very much for your support.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
.site-header {
height: 175px!important;
padding: 0;
}
@media only screen and (max-width: 768px){
.site-header {
height: 209px!important;
padding: 0px!important;
}
.grid-item.large--one-half.text-center.large--text-right {
display: none;
}
}
it's not working to me I using craft theme but it's not resize the header too make smaller so I you can do that so please make for me to in desktop view shows the header like amazon or etc... I mean small header!!!
it's my website www.mehrabanstore.com
Dear @Colin74pei
/* Start */
header.site-header {height: 185px !important;}
@media only screen and (max-width: 768px){
header.site-header {height: 180px !important;}
.header-logo .lazyload__image-wrapper {max-width: 110px !important; }
header.site-header .header-logo { margin: 15px auto !important; }
header.site-header .site-header--text-links, header.site-header .site-header--text-links p {margin-bottom: 0px !important;}
}
/* End*/
This is an accepted solution.
Dear Pallavi and MS-WEB-Designer,
Both of codes work for me, thank you very much for your support.
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024