-
AuthorPosts
-
May 28, 2016 at 12:00 am #639555
I have a fullscreen color section with a transparent header. which works great on my desktop. The problem is on my iPhone in portrait and landscape mode. Because I am using a transparent header, the height is not calculating correctly on mobile with header and it is extending longer than fullscreen. Can you please give me some quick css to fix this? Thanks!
May 28, 2016 at 8:35 am #639682Hey djshortkut,
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: 767px) { .responsive #top #main .container_wrap:first-child { margin-top: -84px; }}
Best regards,
VinayMay 28, 2016 at 4:30 pm #639792Thank you Vinay! That works but now the special heading is not centered correctly in this section and is moved up to close to the header. How can I center the special heading at the same time?
- This reply was modified 8 years, 7 months ago by djshortkut.
May 28, 2016 at 7:51 pm #639828Hi,
The special heading looks good on my end. if you do not see the same on your end please elaborate which browser and device you are using so we can further investigate.
Best regards,
VinayMay 28, 2016 at 8:43 pm #639833There are 2 issues I noticed so I had to remove the code temporarily so it wouldn’t mess up my site:
1. I already have some custom css (below) that adjusts the height of the fullscreen slider. The code you provided adjusts the height of all of the color sections as well as the fullscreen slider on my homepage (which I don’t want) making it extremely short. I added a custom css class of fullscreen_color_section Can you modify the code to use this custom css class so it only targets the color section on this page?
@media only screen and (max-width: 420px) { .home div#fullscreen_slider_0 { max-height: 490px !important; overflow: hidden; } .home .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow { height: 490px !important; }} @media only screen and (max-width: 767px) and (min-width: 480px) { .home div#fullscreen_slider_0 { max-height: 295px !important; overflow: hidden; } .home .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow { height: 295px !important; }}
2. Here is what I’m seeing on my iPhone 6 with Safari. (See Image) where the special heading is not centered and too high.
May 29, 2016 at 6:50 am #639899Hey!
Please use the below code this will affect only the colorsection with the class .fullscreen_color_section adjust top padding for the special heading to suit your design.
@media only screen and (max-width: 767px) { .fullscreen_color_section { margin-top: -120px; } .fullscreen_color_section .av-special-heading { padding-top: 120px; }}
Cheers!
VinayMay 29, 2016 at 7:44 pm #640021Thanks Vinay, that worked! You can close this thread.
May 30, 2016 at 6:11 am #640122 -
AuthorPosts
- The topic ‘Fullscreen Color Section’ is closed to new replies.