Tagged: above, Colour section, full width easy slider, gap, mobile, tablet
-
AuthorPosts
-
October 15, 2016 at 1:25 am #699334
Hi, I am using Colour Sections to place unique headers on each of my pages. On the desktop, they look perfect. But on mobile devices, there is a large white space between the Colour Section and the content below.
What is causing that, and how do I remove it?(Note: on the home page, I used a Full-Width Easy Slider for the header and it works great. But apparently, it doesn’t work on subsequent pages, because when I tried it, the page became full-width and the sidebar was forced to the bottom.)
What do you suggest?
October 18, 2016 at 10:09 am #700530Hey blaaklistwriters!
Thank you for using Enfold.
Looks like you have set the background size to “contain” and then applied a minimum height to the color section. On mobile view, in order to preserve its aspect ratio, the background shrinks and it leaves spaces underneath. The workaround is to remove the background image, insert an Image element instead and then disable the Section Minimum Height option.
Cheers!
IsmaelMarch 4, 2019 at 11:14 pm #1074544This reply has been marked as private.March 6, 2019 at 4:44 am #1075238Hi,
Thank you for using Enfold.
Have you tried setting the “Section Padding” to “No Padding”? That option should remove the vertical spaces above and underneath the color section container. You can also use this css code, but it’s going to affect every color section in the site.
@media only screen and (max-width: 767px) { .content { padding-top: 0; padding-bottom: 0; } }
Best regards,
IsmaelMarch 6, 2019 at 11:40 pm #1075702Thank you for your reply.
I already tried setting the “Section Padding” to “No Padding”.
I also tried css.
But not solved.Is there any other way?
Thanks.
March 7, 2019 at 11:40 am #1075930I also tried this post. But did not solve it.
https://kriesi.at/support/topic/easy-slider-full-width-and-white-space-above/March 11, 2019 at 4:47 am #1077201Hi,
Thanks for the update.
Can you give us a screenshot of the area that you’re trying to remove? Please upload the screenshot to imgur or dropbox.
Best regards,
IsmaelJune 4, 2019 at 10:33 pm #1107277Hello Dear Support!
I’m curious about your response to this question, so I’m posting my site credentials in the private window. The specific webpage referenced there is the portfolio item that I have changed so that the mobile appearance is better. Basically, I am hiding some of the elements in the left column (back to Work, Related Projects and the associated white separators) on mobile so that the mobile user can get right to the project description after seeing the images in Easy Slider. There is the unfortunate white space after the Color Section on mobile – that is what I would like to remove. Everything looks fine on desktop.I am viewing the mobile on an iPhone if that makes any difference.
Thanks in advance for your help.
Cheers, Leslie
- This reply was modified 5 years, 4 months ago by Basilis.
June 9, 2019 at 4:35 pm #1108602Hi,
For security reasons, please create your own ticket and edit your details there. I have removed them from here.
Best regards,
BasilisMay 21, 2020 at 5:55 pm #1215052Hi!
I have the same problem if I add a sidebar in the page.
I mean:
no side bar = no white padding neither desktop nor mobile
with sidebar = white padding only in mobilethis page https://www.phoenixdivers-kohlanta.com/koh-lanta/
Can someone help?
May 21, 2020 at 5:57 pm #1215053I think i solved with
/* no top line on container */ .container_wrap { border-top: none !important; }
May 22, 2020 at 12:32 am #1215113Hey phoenixdivers-kohlanta,
I’m glad you were able to solve this!
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.