Solved

What's the solution for logo alignment issues on lower resolution displays in Shopify?

PetrMachacek
Explorer
71 1 18

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:

Propper alignmentPropper alignment

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:

Capture1.JPG

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

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@PetrMachacek 

 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 7 (7)

dmwwebartisan
Shopify Partner
12280 2546 3694

@PetrMachacek 

 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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
PetrMachacek
Explorer
71 1 18

Hi i tried that but this is result when i resize the window 😞

Capture2.JPG

dmwwebartisan
Shopify Partner
12280 2546 3694

@PetrMachacek 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

@PetrMachacek 

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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
PetrMachacek
Explorer
71 1 18

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.

 

Capture3.JPG

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@PetrMachacek 

 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
PetrMachacek
Explorer
71 1 18

Amazing! thanks a lot for helping us out 🙂