Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 25, 2019 at 9:40 am #1121849
    MarkusSchauma

    Hello,

    I tried every possible css code I could find on this forum, but nothing seems to work.
    The logo of our new site is way too big for mobile, I would like to resize it for mobile and tablet (portrait). Can you help me with that?

    I also had to use grid row elements. But grid rows are absolutely not responsive! They stick to the left side and leave a huge padding towards the right side.
    Can you give me a solution how to make my content responsive?

    Log-in data in private content.

    Thanks a lot.

    July 26, 2019 at 5:05 am #1122054
    Rikard

    Hey MarkusSchauma,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-width: 70% !important;
}
}

    Best regards,
    Rikard

    July 26, 2019 at 7:21 am #1122098
    MarkusSchauma

    Hello Rikard,

    thanks a lot. The logo has now the perfect size on mobile.

    You also have a solution to the grid-row problem?
    If you access the site on your mobile you can see, what I mean by the content is sticking to the left side and leaving a lot of padding on the right.

    Best regards

    July 27, 2019 at 5:27 am #1122236
    Rikard

    Hi,

    Thanks for the update. About the Grid Rows, you have this CSS which is causing that:

    div .av_one_half {
    margin-left: 1% !important;
    width: 49% !important;
}

    It’s coming from the file in private. Could you try removing the !important bit please?

    Best regards,
    Rikard

    July 29, 2019 at 8:18 am #1122658
    MarkusSchauma

    Hey Rikard,

    thank you so much for that hint. I deleted the css code and all similiars. The site looks so much better now on mobile devices.
    My only problem now is the footer. I know that a css code causes this problem as well but this one I can’t delete. I have to find a way to make it also work for mobile but this shouldn’t be your problem – you helped me a lot so far – thank you!

    Best regards

    July 29, 2019 at 7:30 pm #1122872
    Victoria

    Hi MarkusSchauma,

    Which part is breaking in the footer?

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    July 31, 2019 at 2:08 pm #1123551
    MarkusSchauma

    Hello Victoria,

    this is the footer on mobile:
    Footer1<br />pic hochladen<br />

    and this is the footer on desktop:
    footer2<br />pic hochladen<br />

    This is the code I used in Quick CSS:

    ul.sub-menu {
    background: transparent !important;
    }
    ul.sub-menu a {
    background: rgba(0, 137, 201, 0.7) !important;
    }
    .av-masonry-date {
    display: none !important;
    }
    #top #header.header-scrolled .av-main-nav > li > a .avia-menu-text {
    color: #717676;
    }
    #top #wrap_all .av_header_transparency .sub_menu > ul > li > a {
    color: #ffffff;
    }
    body div .first,
    body div .no_margin {
    margin-left: 0;
    }
    #footer .av_one_fifth.first {
    margin-left: 0 !important;
    width: 23.5% !important;
    }
    #footer .av_one_fifth:nth-child(2) {
    margin-left: 3% !important;
    width: 9% !important;
    }
    #footer .av_one_fifth {
    margin-left: 1% !important;
    width: 20.5% !important;
    }
    .widget .news-time{
    display: none !important;
    }
    @media only screen and (max-width: 767px) { .responsive .logo img {
    max-width: 70% !important;
    }
    }

    I know it’s the code that causes the trouble on mobile view. But the footer looks exactly like I want it to on desktop, so I’m struggling to delete it. I need to work my way round to make it also work on mobile, maybe with a code that adds breakpoints on small displays – but I’m not a programmer :)
    Maybe you can help me with a solution?

    Best regards

    August 1, 2019 at 6:27 am #1123759
    Rikard

    Hi,

    You have this CSS coming from the same file I previously posted about:

    #footer .av_one_fifth.first {
    margin-left: 0 !important;
    width: 23.5% !important;
}

    It’s overriding the theme CSS, please remove the important part again or use it inside of a media query instead.

    Best regards,
    Rikard

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