-
Posts
-
I am just beginning to develop an Enfold site and have a rough Advanced Layerslider placeholder on the home page. The issue is when it hits the first responsive breakpoint—I get it at around 992px—the menu changes to the mobile menu and the slider image slips up under the top logo section container cutting off about 1/3rd of the image. This seems to happen only on the “tablet” view and not on the “smartphone” view. Unfortunately, that tablet view is very important. Whenoit get narrower as in mobile view, it doesn’t happen.
There is a white space below the top logo that grows inn this view and the logo no longer sits on top of the layerslider, but is seperated with the layerslider going under the white space. The logo should sit on top of the layerslider when going responsive to maintain the layout in tablet view. It looks like the logo/menu area container does not have the same responsive breakpoints as it does not change in depth until the 2nd breakpoint is hit—then it works for mobile and sizes proportionately. I can’t find what this element is in the web inspector.
I tried everything I could think of to prevent it, but could not find a solution. I have included the web adderess and password. Please look at the home page and shrink the window horizontally and you will see the problem.
Is there a solution to this issue?
Hey blaircomm,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width:992px) { .ls-slide.ls-slide-1 { margin-top: 87.99474px!important; } .container.av-logo-container { height: 210px !important; }}Best regards,
VinayThank you for your response. The code really helped and jumpstarted me. I got the following to work for the header, logo, menus and the advanced layerslider, which seems to have its own breakpoints somewhere. It could probably be more efficient, but it works across devices—tested on many Apple and Android devices.
@media only screen and (max-width: 1192px) {
nav.main_menu { display: none !important; }
#advanced_menu_toggle { display: block !important; }
}@media only screen and (max-width:1192px) {
.ls-slide.ls-slide-1 {
margin-top: 0px!important;
}
.container.av-logo-container {
height: 120px !important;
}}@media only screen and (max-width:1192px) and (min-width: 994px) {
.ls-slide.ls-slide-1 {
margin-top: 120px!important;
}
}@media only screen and (max-width:1192px) and (min-width: 994px) {
#layer_slider_1 {
height: 740px !important;
}}@media only screen and (min-width: 768px) and (max-width: 1192px) {
.responsive #top #wrap_all #header { position: fixed; }
.responsive .header-scrolled #header_main .container {height: 60px !important; line-height: 60px !important; }
.responsive #top #main {padding-top: 15px !important; margin: 0;}
}
- The topic ‘Advanced Layerslider responsive issue’ is closed to new replies.