-
Posts
-
Since I updated Enfold this morning, when I scale down my browser window, my images in columns just get smaller but do not drop down below each other. They appear to no longer be responsive.
Hi D5WDesignGroup!
There was a change with how column content is rendered but it doesn’t remove responsive support. Can you provide a link to the page?
Best regards,
DevinYou can see the issue on the following pages.
http://startwishing.com/thewater/
http://startwishing.com/product-specs/Thank You.
Looks like it was pulled out of the grid or the inheritance got messed up a bit. You can add this to your custom.css file inside of the mobile only media query:
#top .flex_column.av_one_third { width: 100%; margin-left: 0; }That works somewhat for pages that have 3 columns but pages that have 4 or the footer which has 4 still has the problem. Any new pages that I create seem to work fine. Why is it that all of the pages I created before the update no longer work? I don’t want to have to rebuild the pages. With the fix that you sent, the images from the first row get stacked tight up against each other when it goes to mobile while the images from the other rows all have wider spacing between them when they go mobile.
Sorry I thought you had them from the previous replies.
Suggested Fix:
#top .flex_column.av_one_third {
width: 100%;
margin-left: 0;
}My Response:
That works somewhat for pages that have 3 columns but pages that have 4 or the footer which has 4 still has the problem. Any new pages that I create seem to work fine. Why is it that all of the pages I created before the update no longer work? I don’t want to have to rebuild the pages. With the fix that you sent, the images from the first row get stacked tight up against each other when it goes to mobile while the images from the other rows all have wider spacing between them when they go mobile.Some of the pages that are having the issue:
Hi!
Please use this on custom.css or Quick CSS to fix the one fourth column widgets:
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .av_one_fourth.first.el_before_av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_half { margin-left: 2%; clear: none; } .responsive .av_one_half.first + .av_one_fourth, .responsive .av_one_half.first + .av_one_fourth + .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_half { margin-top: 0; } .responsive .av_one_fourth.first.el_before_av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth { margin-left: 2%; width: 23.1%; } }Cheers!
IsmaelThat has not fixed the issue of the 4 columns in the footer not being responsive. It also does not address the spacing problem originally stated above.
#top .flex_column.av_one_third {
width: 100%;
margin-left: 0;
}“With the fix that you sent, the images from the first row get stacked tight up against each other when it goes to mobile while the images from the other rows all have wider spacing between them when they go mobile.”
Everything was working fine prior to the update. How can I fix this without having to experiment with adding Quick CSS? Do I need to reinstall the theme?
It seems as though its having a problem with the Advanced LayerSlider after the update. The columns all work fine and are responsive with no additional Quick CSS until there is more than one Advanced Layerslider on the page. As soon as there is more than on Layerslider on the page the responsive columns no longer work.
I think a very similar problem is generated also by fullwidth easy slider after the update. Can it be of the same origin?
See my post: https://kriesi.at/support/topic/fullwidth-masonry-fullwidth-easy-slider-layout-problem/It seems as though its having a problem with the Advanced LayerSlider after the update. The columns all work fine and are responsive with no additional Quick CSS until there is more than one Advanced Layerslider on the page. As soon as there is more than one Layerslider on the page the responsive columns no longer work.
Hi!
I have just checked the pages where you are/were having issues and it seems to be working fine now. Can you confirm that it is fine on your end as well?
Also, version 2.5.2 was released recently and has some small bug fixes. If you are having any other issues, please try updating the theme ( see http://kriesi.at/documentation/enfold/updating-your-theme-files/ )Best regards,
YigitIt is not working fine on my end. All of the images on those pages should be dropping down below each other when on mobile. Also the footer is still not responsive. This is all since the update a few days ago. I just installed the newest update and I am still having the same problem. Items in columns are only scaling down, not going responsive when there is more than one Advanced Layerslider on the page. Please advise, I need to get this resolved A.S.A.P.
Hey!
Please try adding following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 767px) { div .av_one_third, div .av_one_fourth { margin-left: 0!important; width: 100%!important; }}Regards,
YigitThat makes them responsive but as I have said previously above it causes other issues.
“With the fix that you sent, the images from the first row get stacked tight up against each other when it goes to mobile while the images from the other rows all have wider spacing between them when they go mobile.”
There is a problem with the columns and the advanced layersliders. That quick CSS causes spacing issues between items. This wasn’t an issue prior to the update earlier in the week.
Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) { body .column-top-margin { margin-top: 0; } body .container_wrap .avia-builder-el-last { margin-top: 30px; }}Best regards,
YigitPlease review these pages and you will see that there are still spacing issues:
http://startwishing.com/product-specs/
http://startwishing.com/Am I better off reverting back to the previous version of the theme from last week when there weren’t any of these issues?
Hi!
This should fix the image gap on mobile view:
@media only screen and (max-width: 767px) { .avia-align-center.avia_image.avia-builder-el-no-sibling { margin-bottom: 0; margin-top: 15px; } }This is for the footer widget.
@media only screen and (max-width: 989px) and (min-width: 768px) { div .av_one_fourth { width: 48.0%; } }Regards,
IsmaelI have added that along with all of the other code fixes that have been suggested. Please review the pages that I sent previously. It is still not working properly. There are still spacing problems.
http://startwishing.com/product-specs/I even tried a fresh install of wordpress with a fresh install of Enfold with no other plugins installed, on a different server. The issue is the same. Once you have more than one Advanced Layerslider on a page the columns no longer work properly. When do you expect to have this issue fixed? I can’t keep waiting and trying these code fixes that aren’t working. If there isn’t going to be a fix I need to know now so I can revert back to one of the previous versions of the theme.
Hi!
Tbh I’m not sure if Kriesi is going to fix this issue directly. The next update will include LayerSlider 5 and if we find an incompatibility issue (i.e. with the column elements) we will fix it for sure. For now you can try this css code:
@media only screen and (max-width: 767px){ body .column-top-margin { margin-top: 10px; } .avia-align-center.avia_image.avia-builder-el-no-sibling { margin-bottom: 10px; } }to fix the spacing issue for smaller screens.
Cheers!
PeterHi!
To be honest I don’t see the problem when I try to reproduce your issue and since you are currently running the older version I cant check it on your page either. I was able to reproduce the footer problems which I could fix. Do you see any of the problems you encountered on our live demo page?
Cheers!
KriesiSorry I had to switch back to the older version to avoid the responsive column issues. I didn’t see the problem on your live demo page but I didn’t see any pages on your live demo containing multiple Advanced LayerSliders. The issue appears when you have more than one Advanced LayerSlider on a page. It also seemed to happen when I had one Advanced LayerSlider and the Masonry Gallery on the same page.
What is the exact layout that is causing issues? Is it just multiple LayerSliders or somethign else on top of that?
- The topic ‘After updating, images in columns are no longer responsive?’ is closed to new replies.