Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 28, 2016 at 12:00 am #639555
    djshortkut

    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 #639682
    Vinay

    Hey 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,
    Vinay

    May 28, 2016 at 4:30 pm #639792
    djshortkut

    Thank 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, 6 months ago by djshortkut.
    May 28, 2016 at 7:51 pm #639828
    Vinay

    Hi,

    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,
    Vinay

    May 28, 2016 at 8:43 pm #639833
    djshortkut

    There 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 #639899
    Vinay

    Hey!

    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!
    Vinay

    May 29, 2016 at 7:44 pm #640021
    djshortkut

    Thanks Vinay, that worked! You can close this thread.

    May 30, 2016 at 6:11 am #640122
    Rikard

    Hi,

    Great, glad we could help :-)

    Thanks,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Fullscreen Color Section’ is closed to new replies.