Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 2, 2016 at 3:14 pm #592088
    quadrocreative

    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

    March 4, 2016 at 1:11 pm #593243
    Ismael

    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

    March 4, 2016 at 3:40 pm #593297
    quadrocreative

    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

    March 7, 2016 at 1:44 pm #594274
    Vinay

    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

    March 10, 2016 at 12:40 pm #596252
    quadrocreative

    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

    March 15, 2016 at 6:16 am #598170
    Ismael

    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

    March 15, 2016 at 11:38 am #598311
    quadrocreative

    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

    March 19, 2016 at 9:04 am #600629
    Ismael

    Hi!

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

    Best regards,
    Ismael

    March 21, 2016 at 12:46 am #600923
    quadrocreative

    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

    March 21, 2016 at 3:28 am #600947
    Ismael

    Hi!

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

    Cheers!
    Ismael

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