Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #592088

    Hi Support,

    I am experiencing issues with a number of elements when viewing on mobile and tablet

    on home page
    – logo
    – columns (ground rent / landlord services / reference library)
    – menu

    Can you advise how I can…
    – make the logo position stay relative to the text below
    – make the columns fill the screen width when on mobile or tablet
    – make the menu mobile on tablet on smaller

    Best Regards,

    Richard

    #593243

    Hey quadrocreative!

    Thank you for using Enfold.

    1.) Add the logo as an image element above the text. Or try in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    .responsive #top .logo {
        width: 100%;
    }
    
    .responsive .logo a {
        text-align: center;
    }
    
    .responsive .logo img {
        margin: 0;
        display: inline-block;
    }
    }

    2.) This custom css codes reaks the responsive layout of the columns:

    .home .flex_column.avia-builder-el-15, .home .flex_column.avia-builder-el-17, .home .flex_column.avia-builder-el-19, .home .flex_column.avia-builder-el-22, .home .flex_column.avia-builder-el-24, .home .flex_column.avia-builder-el-27, .flex_column.av_one_fifth.avia-builder-el-18.el_after_av_image.el_before_av_one_fifth {
        margin: 0 10px !important;
        width: 17.2% !important;
    }
    
    .home .flex_column.avia-builder-el-15, .home .flex_column.avia-builder-el-17, .home .flex_column.avia-builder-el-19, .home .flex_column.avia-builder-el-22, .home .flex_column.avia-builder-el-24, .home .flex_column.avia-builder-el-27 {
        margin: 0 10px !important;
        width: 17.2%;
    }

    What does it do?

    3.) Could you please provide a screenshot of the mobile layout that you want?

    Regards,
    Ismael

    #593297

    Hi Ismael,

    Many thanks for your response

    I have removed some of the coding I had to bring in the columns and now its much better when responsive.

    All I need to do is have the logo image appear centrally to the text below (only in full screen mode)… in mobile / responsive it can be on the left. Can you please advise how I can make it padding by a percentage rather than by a px number.

    I have tried the following code…

    .logo img {
    padding-left: 45%; !important
    }

    but it does not align the logo with the column below

    Best Regards,

    Richard

    #594274

    Hi!

    It looks like you have got this sorted the logo looks centered to the text below it as you have mentioned

    Please let us know if you have any questions.

    Best regards,
    Vinay Kashyap

    #596252

    Hi Vinay,

    Unfortunately I could not get it centred in all positions relating to the size of the screen.

    Is there a way of using a screen percentage rather than px value?

    Best Regards,

    Richard

    #598170

    Hi!

    The only workaround I can think of other than adding multiple css media queries is to remove the current logo then edit the page, add the logo using an image element above the phone text block.

    Regards,
    Ismael

    #598311

    Hi Ismael,

    I don’t think that removing the image would work across the whole of the site.

    I would be happy to use multiple css media queries… Can you advise how to set up four versions split in to two…

    full screen: desktop 1920px width / laptop 960px width
    mobile: ipad 768px width / mobile 480px width

    Best Regards,

    Richard

    #600629

    Hi!

    Looks like you managed to align the logo by setting the width of the container. Good job. :)

    Best regards,
    Ismael

    #600923

    Hi Ismael,

    Yes – thanks

    I adjusted some of the code you supplied and it worked a treat

    Many thanks for your support

    All the best

    Richard

    #600947

    Hi!

    Great! Let us know if you need anything else. :)

    Cheers!
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Issue with responsive design’ is closed to new replies.