Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 3, 2017 at 8:09 pm #816042
    crg1

    When viewing my website on a mobile phone the content boxes on the home page (Our Services, Where We Are and Contact Us) are overlapping the slideshow image, they are way to big. Is there a way in which I can reduce the size of these boxes on mobile only? I have tried changing the padding settings but that doesn’t really help.

    July 4, 2017 at 5:56 am #816160
    Rikard

    Hey crg1,

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

    @media only screen and (max-width: 767px) {
.home #av_section_1 .flex_column_table {
    margin-top: -130px !important;
}
}

    Best regards,
    Rikard

    July 4, 2017 at 9:43 am #816219
    crg1

    I tried that and it didn’t work- it seemed to make matters worse. I have since deleted the css and now the website doesn’t seem to be displaying correctly at all when viewed on mobile.

    July 4, 2017 at 12:04 pm #816266
    Rikard

    Hi,

    Ok, so the CSS broke your site? It seems fine on my end when I load it. Could you post a screenshot of the element you would like to alter and how please?

    Best regards,
    Rikard

    July 4, 2017 at 12:08 pm #816270
    crg1

    It seems to be displaying as it was before when viewed on mobile (which is ok) however, I still have the same issue with the content boxes overlapping the slideshow image at the top of the home page.

    July 5, 2017 at 4:21 am #816571
    Rikard

    Hi,

    Ok, thanks for the feedback. The CSS I gave you was for moving the boxes down a bit on mobile screens. Could you try it again and adjust the values to your liking if it’s not exactly how you envisioned it?

    @media only screen and (max-width: 767px) {
.home #av_section_1 .flex_column_table {
    margin-top: -130px !important;
}
}

    Best regards,
    Rikard

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