Canvas Support

Mobile header

7 replies · opened Aug 3, 2021

OOmelchenkoMaximAug 3, 2021

Hello, the header of the site looks ugly in the mobile version, a very large distance from above. Even in the original template, it is rather unfortunate. What is the best way to fix this? Thanks.

OOmelchenkoMaximAug 4, 2021

There is also a mini-bug in process-steps.html, if you look at the mobile version, the distance in front of the block is a bit large, it doesn't look so good.

OOmelchenkoMaximAug 4, 2021

Attach2

SSemicolon WebSTAFFAug 4, 2021

Hello,

Thanks for your Patience and Apologies for the Inconveniences caused!

  1. The Header Size depends on the Size of your Logo. You can choose to display a different Logo on Mobile Devices with no top/bottom padding. Simply check this Template: https://themes.semicolonweb.com/html/canvas/logo-changer.html . Additionally, there is an Additional 15px of Top/Bottom padding being added to the Header due to the Custom Codes added in your Document Head (see attached Images). The Default Mobile Header appears to be working fine for us (see attached image).

  2. You can simply remove the following line of code according to your preferences:
    [ch_pre][/ch_pre]

This should definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OOmelchenkoMaximAug 4, 2021

Thanks, it helped me. But with the logo I could not win, it loads and then shrinks after a second. It seems to me the same thing happens on the original template according to your link. I'll attach the video.

SSemicolon WebSTAFFAug 5, 2021

Hello,

The Default Logo Height is 100px which is applied automatically on Page Load. However, you can set Custom Heights for your Logo by simply using the following CSS Code:
[ch_pre type="css"]#logo img {
height: 150px;
}[/ch_pre]

And then add the .header-size-custom Class to the #header Tag. This will ensure that your Logo Image is never resized and retains the default dimensions of the image you use.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OOmelchenkoMaximAug 5, 2021

Thank you very much, I figured it out. I have one last little question, how to make a logo in the mobile version centered? The topic can be closed)

SSemicolon WebSTAFFAug 6, 2021

Hello,

Simply replace the #logo DIV with the following code:
[ch_pre]<div id="logo" class="ms-auto ms-md-0">[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard