Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #325254

    Hi,

    Thank you so much for your regular help, expertise and patience.

    I have a 1 page site which is now live.
    lemurjames.co/sequoia

    I’ve just checked what it looks like on mobile (iphone safari)
    I’ve attached images of it.

    On mobile:
    Full Screen Image is chopped (in landscape & portrait) / Image does not fit mobile screen

    3 x “Buy Icons” are GIANT / So big they are stacked vertical.

    How can i make the mobile site look like the pc browser site?

    Many thanks
    Nathan

    #325255

    “Menu Box” top right.
    I would like this to be removed.

    #325334

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 479px) {
        .avia-fullscreen-slider .avia-slideshow{
            height: 291px !important;
        }
    }
    
    #advanced_menu_toggle{
    display: none !important;
    }

    Cheers! 
    Josue

    #325954

    This code helped greatly.

    Attached pc & mobile comparisons of the site. lemurjames.co
    How is it possible to make the (mobile site) gap more in sync the the gap on the pc site?

    How is it possible to make the three images below align horizontally like on the pc site?

    Many thanks
    Nathan

    #326054

    Hi Nathan!

    Try adding this:

    @media only screen and (max-width: 767px) {
        .home .av_one_fifth.avia-builder-el-6, .home .av_one_fifth.avia-builder-el-8, .home .av_one_fifth.avia-builder-el-10{
            width: 30% !important;
            margin-right: 3% !important;
        }
        .home .content {
           padding-top: 0 !important;
        }
    }

    Cheers!
    Josue

    #328096
    This reply has been marked as private.
    #328118
    This reply has been marked as private.
    #328340

    Hi!

    1. Fullscreen slider images behave like that on mobile because the same image used in desktop would look stretched if forced to fit the mobile screen and be 100% height at the same time, so it transforms into a background bigger than its container. The code i suggested turned the “100% height rule” off on mobiles so the image can fit naturally.

    2. The mobile menu toggle appearing when no menu or menu items present was a bug that is already fixed in the latest version of Enfold (3.0).

    3. All columns transform to 1/1 columns when the screen size is smaller, that’s the expected behavior, you can always prevent this with custom CSS though.

    Regards,
    Josue

    #329281

    I changed the heigh from 291px to 220px and this made the Header image come in, fit much better. It also made the 3 icons horizontal instead of being verticle.

    lemurjames.co
    calmstorm.co

    I have made 2 simple 1 page sites. They both use the same quick css code, image sizes yet they respond differently.

    Why is the code in quick css responsive but if this code is cut and pastes into custom.css it has no affect?

    Is there any css knowledge resource that would help me manipulate Enfold? I am so thankful for your help. But it would be good to know more.
    Best to ask you what works with Enfold.

    Is it possible to put the menu below the header full screen image?

    Many thanks|
    Nathan

    #329285

    The Header and Footer/Socket have been removed. And big space at bottom.

    #329314

    Hi!

    You are not using the same version of Enfold on both sites, one is using 3.0 and the other 2.9.2, that’s why they look different and yes, there is a new element (3.0) that allows you to insert a fullwidth menu wherever you want.

    Regards,
    Josue

    #329858

    I really appreciate your help : )

    Many thanks,
    Nathan

    #329875

    You are welcome Nathan, always glad to help :)

    Regards,
    Josue

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.