-
AuthorPosts
-
August 9, 2018 at 1:55 am #995191
Hello
I’m working on a new project which I have taken over from some one else, they started things using your Enfold theme, which I also have a copy of myself from way back.
I’m just starting with the top section, so down to the slideshow on the home page, see: http://www.jelfon.co.uk/prosols-test1
I’ve been trying to get things looking tidy on different devices and have been using: http://quirktools.com/screenfly/ to help examine things.
Basically if you change the width of the browser gradually you will see that the logo and the main menu start to overlap, can you please help me with this issue?
If you look at the image below, this represents an iPad in portrait mode:
http://www.jelfon.co.uk/prosols-test1/wp-content/uploads/breakpoints-issue1.png
I did study the forum to see if I could find a fix and experimented with the code here: https://kriesi.at/support/topic/responsive-issuesbreak-points/
This actually was a step in the right direction, but when I added the code in the link above, the menu was generally better, but new issues appeared relating to the slideshow having loads of white space above at certain breakpoints, so I’ve left this off for now.If you can help, or point me in the right direction, I’d be very grateful.
Thanks
Joe- This topic was modified 6 years, 3 months ago by joerainbow.
August 9, 2018 at 11:11 am #995375Hey joerainbow,
Thank you for using Enfold.
The site is still running on a very old version of the theme, 3.8. You need to upgrade to version 4.4.1 and then add these css codes to force the mobile to display on certain screen width.
@media only screen and (max-width: 1024px) { .responsive #top .av-main-nav .menu-item-avia-special { display: block; } .responsive #top .av-main-nav .menu-item { display: none; } .responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left: 0; padding-right: 0; float: none; } }
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.