Shopify themes, liquid, logos, and UX
Hi,
I would like to ask for advice from more knowledgable people than I am 🙂
On my webpage: www.doramu.cz I struggle with Logo alignment and size. When I load the page everything looks ok as shown below:
However once I open page with lower resolution display or I just resize the window things go south 😄 Lo either ends up in different alignment or sometimes changes its size to unreadable size:
Is there anything I can do to fix my logo size and position? I assume that issue is interference with Megamenu I'm using, but Megamenu size is small compared to available space.
Also when I resize window back everything stays disorganized.
Thanks for any valuable advice.
Petr
Solved! Go to the solution
This is an accepted solution.
Please follow these steps: - Step 1: Go to Online store > Themes > Actions > Edit code. - Step 2: Go to Assets > theme.css and paste this at the bottom of the file.
.Header__FlexItem { display: contents !important;}
Thanks!
Please follow these steps: - Step 1: Go to Online store > Themes > Actions > Edit code. - Step 2: Go to Assets > theme.css and paste this at the bottom of the file.
@media screen and (min-width: 1140px){
.Header--center .Header__FlexItem--logo {
margin-bottom: 40px !important;
float: left !important;
display: contents !important;
}
}
Hi i tried that but this is result when i resize the window 😞
Remove previous css code and add this new code .
@media screen and (min-width: 1140px){
.Header--center .Header__FlexItem--logo {
margin-bottom: 0px !important;
float: left !important;
display: contents !important;
}
.Header__Logo {position: absolute !important; margin-bottom: 0;}
.Header--center .Header__FlexItem {margin-bottom: 0px !important;}
}
Thanks!
Remove previous css code and add this new code .
@media screen and (min-width: 1140px){
.Header--center .Header__FlexItem--logo {
margin-bottom: 0px !important;
float: left !important;
display: contents !important;
}
.Header__Logo {position: absolute !important; margin-bottom: 0;}
.Header--center .Header__FlexItem {margin-bottom: 0px !important;}
}
Hi and thanks a lot 🙂 Already looks much better. There is still a minor issue. Because when I load the page it is aligned to the bottom, and goes to propper position when I resize the window.
This is an accepted solution.
Please follow these steps: - Step 1: Go to Online store > Themes > Actions > Edit code. - Step 2: Go to Assets > theme.css and paste this at the bottom of the file.
.Header__FlexItem { display: contents !important;}
Thanks!
Amazing! thanks a lot for helping us out 🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024