Tagged: CSS, enfold, media queries, responsiveness
-
AuthorPosts
-
November 21, 2016 at 10:28 pm #715032
Hi Support
I just published a website.
It appears that perhaps the CSS, layout or media queries configured might be incorrect.
Two issues I see are:
1. The company title in the header to the right of the logo appears to be on top of the menu at a certain resolution.
I assume this is a media query setting that needs to be altered.
2. On this page http://choice-consult.com/amir-oren a similar problem occurs as in a certain resolution the e-mail address (left side) appears to be over the content text on the right.
I believe this might be resolution of an Ipad but I’m unsure.Thanks for your assistance!
Best Regards
OferNovember 22, 2016 at 7:10 am #715129Hey ouverz,
Please try the following in Quick CSS under Enfold->General Styling to activate the mobile menu earlier:
@media only screen and (max-width: 1140px) { nav.main_menu {display:none !important;} #advanced_menu_toggle, #advanced_menu_hide {display:block !important;} }
Your logo subtext is long and quite big so it won’t fit on smaller screen. You might want to consider hiding it and adding the information to a for instance a Color Section and hide that section for all screens bigger than mobile. Assign an ID to it and use the following CSS:
@media only screen and (min-width: 768px) { #your-section-id { display:none; } }
Best regards,
RikardNovember 23, 2016 at 9:43 pm #716175For some reason the CSS you have offered me does not trigger a thing, as in nothing changes.
I tried several iterations as well as use the ‘!important’ attribute but it seems as if the stylings are overwritten.Also, what would you suggest,for the personal profile page I entered in this reply, in order to have this long e-mail address not overlay the content on the right side when the resolution is less than 1074px?
thanks in advnace
November 24, 2016 at 7:07 am #716278Hi,
Ok, please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardNovember 24, 2016 at 8:58 am #716308I see.
November 24, 2016 at 3:12 pm #716440Hi,
I added the following to your Quick CSS so there is no more overlapping from the menu:
@media only screen and (max-width: 1250px) { nav.main_menu {display:none !important;} #advanced_menu_toggle, #advanced_menu_hide {display:block !important;} }
Please try the suggestions I gave you earlier to see if you get it working.
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.