3 replies · opened May 3, 2021
Hi, this site is currently in development https://daycon.treepl.co/. One thing that I really need help with is how to make the nav responsive on Ipad and Ipad Pro in portrait and landscape orientations. Today lots of people use these devices to look online, and the Canvas theme does not display well on these devices.
Is there any code block I have missed, or changes I can make to get this to happen?
Thanks a bunch. Megan
www.pixelportal.com.au | megan@pixelportal.com.au
Hello,
We have checked out your Website and the issue is due to a lot of menu items and the number/get a quote button, which makes it larger than the available width in Smaller Devices like iPads. There are 2 options to solve this:
You can decrease the size of the fonts in these devices using the following CSS code:
[ch_pre type="css"]@media (min-width: 992px) and (max-width: 1199.98px) {
#logo img {
height: 30px !important;
}
.menu-link {
font-size: 11px;
padding-left: 9px;
padding-right: 9px;
letter-spacing: 0px;
}
.header-misc a {
font-size: 12px;
}
.header-misc .btn {
font-size: 12px;
padding-left: 11px;
padding-right: 11px;
}
}[/ch_pre]
1200px is Definitely Possible but there is a fair bit of Customization required to achieve this:In the style.css File, you will need to change all the Media Queries that includes the #header,#primary-menu and other Header Elements from @media (min-width: 992px) to @media (min-width: 1200px) and from @media (max-width: 991.98px) to @media (max-width: 1199.98px).
In the js/functions.js File, you will need to change all the following codes targeting the Headers and Primary Menus:
[ch_pre]$body.hasClass('device-xl') || $body.hasClass('device-lg')[/ch_pre]
to:
[ch_pre]$body.hasClass('device-xl')[/ch_pre]
and:
[ch_pre]$body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs')[/ch_pre]
to:
[ch_pre]$body.hasClass('device-lg') || $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs')[/ch_pre]
This should definitely work fine. We are working on making this much more easier in the coming updates. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi Guys, firstly thank you. So good to have support and professional help. I have applied all the fixes, and it looks all good. I would appreciate it if you could take a look - https://ozzikleen.treepl.co/
It was hard to locate all the CSS but I think I have them. Maybe you could indicate the line area where they queries start? Anyways slowly I went looking at all the code.
The script I used a search and replace.
I did have a custom.css media query that tripped me up, line 32, but found it and quick resolution.
Thank you again you guys.
Hello,
Your Website looks stunning.
style.css File, the Header Codes start from Line 3186 from this Block:which goes until Line 4796. So, the changes must be made between these lines.
js/functions.js File, these changes must be made within the SEMICOLON.header function block.We understand that this is a bit of a lengthy process, but we are working on making this easier in the Future versions of Canvas.
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