-
Posts
-
Hello, we have our website running and everything is looking pretty nice. I really like the Enfold theme, it’s easy to use and the layerslider builder made for some nice animated elements. I’ve browsed the support site and seen a few similar issues, but wasn’t able to find any solutions, so I’m hoping someone can help me here.
Anyway, I have two problems with the responsiveness.
First: Halfway down this page that contains a mixture of color sections, advanced layer sliders, layersliders, and multiple columns, it suddenly stops stacking the columns responsively. In the first section, the two columns are stacking on top of each other when the window gets small enough (as expected). But then the next section, and for the rest of the page, all the columns stay side-by-side introducing text overlap, and one word per line, which is impossible to read. I’ve tried disabling all plugins, updating wordpress and the theme, as well as rebuilding the page from scratch. After a certain number of color sections it appears to just give up on the responsiveness.
Second: The advanced layersliders for the section headings are fitting in their color sections correctly, all the way down until we hit the vertical mobile size. Then, when the window gets narrow enough, suddenly a space starts to appear below the slider, and the color section is taller than the content of the layerslider. I’m not sure if this is some minimum padding on the color sections, or if I need to tweak my advanced layersliders.
Any help would be greatly appreciated. Thanks!
Anyone have any solutions for this? I can’t find any way to fix this without completely remove all my headers for each section.
Hi,
Sorry for the delay, we will gladly help you. Please let us know more details.
1. Let us know the heading text that is contained in the colorsection.
2. What is the exact width at which the columns stops stacking responsively. (rightclick and inspect the element of move the developer tools window to view the width).
3. Would you mind posting us a screenshot/mockup of both the issues? You can upload the screenshot to imgur.com or dropbox and share the link here :)Best regards,
VinayHello Vinay, I’m having the same issue!
It’s happening in my food and drink columns, I got the captions to be responsive, not the image themselves, they are not stacking when going to tablet or mobile.
Image dimensions are 623 x 261px
Site in Private Content below:
Update** I got the columns to start stacking and becoming more responsive. I just can’t get them to go full width now or not have paddings/margins around the sides. I’m super close, just need help with this last part. Not sure what is hindering the full-width to work at this time.. Thanks again.
Hi Vinay, here’s what I’ve got on the page. I’ll use the following symbols to help explain the content blocks on each row:
> = the items on the right are inside the items on the left.
|| = separates multiple columns in a single rowHere’s the content of the page in question:
1) Color Section > Text Block > Advanced Layerslider (inserted with [layerslider id=”4″])
2) Text Block (Basic Text)## Start Sub-Section 1
3) Color Section > Text Block > Advanced Layerslider (inserted with [layerslider id=”5″])
4) Color Section (Image BG)> Text Block (Basic Text)
5) Easy Slider
6) 2/3 Column > Heading, Text Block (Basic Text) || 1/3 Column > Heading, Text Block (Basic Text)
7) 1/1 Column > HR Line, Button
## End Sub-Section 1##Start Sub-Section 2
8) Color Section > Text Block > Advanced Layerslider (inserted with [layerslider id=”9″])
9) Color Section (Image BG) > Text Block (Basic Text)
10) Easy Slider
## This is where the columns stop stacking for the remainder of the page
11) 1/3 Column > Icon Box, Text Box (Basic Text) || 1/3 Column > Icon Box, Text Box (Basic Text) || 1/3 Column > Icon Box, Text Box (Basic Text)
12) 1/1 Column > HR Line, Button
##End Sub-Section 2The next two sub-sections are generally the same setup with the Advanced layerslider Heading, Tagline Text, Easy Slider, Column Content. The columns will not stack, just like the 2nd section.
In response to your second question, they never “stop” stacking”, they simply never stack. The first subsection starts tacking the columns when I get to 750px wide and smaller. The next sections never stack and remain side-by-side as shown in the images attached.
As for the headings of my second question – I attached a screenshot from my phone. You can see the advanced layerslider gets a gap underneath in vertical mobile view. This gap starts appearing on my desktop when I get the width of the window below 430px. It continues to increase the smaller I shrink the browser window’s width.
Hi,
Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.
Regards,
RikardHi,
The page is not responsive because the sections starting from “vfx” section are outside the wrap_all container. This issue usually happens if there are elements outside the color section. Make sure that all elements are being wrapped by a color section. We tried to login to the site but the credentials are incorrect.
Best regards,
Ismael
- You must be logged in to reply to this topic.