Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 22, 2015 at 1:02 am #506750
    tdebrouwer

    Hi,

    I got a problem with my enfold website, when opening the website: eye4identity.nl on desktop everything is showing properly.
    But when opening the website on mobile some problems are showing:
    1. Some images are showing behind content on website, which causes the text to become unclear.
    See: http://imgur.com/AXgdQok
    2. One subheader between “pages/content sections” are being cut off
    See: http://imgur.com/q6oDBVG

    So my question is how can I hide certain images on the mobile version of the website and second how can I fix the problem that the header text is being cut off on the mobile version off the website.

    Thanks in advance.

    September 22, 2015 at 10:27 am #506871
    Rikard

    Hi tdebrouwer,

    The header in your portfolio section is too big to be displayed on mobile, please try the following in Quick CSS:

    @media only screen and (max-width: 767px) {
#portfolio .av-special-heading-tag {
font-size: 60px !important;
}
}

    Your other issue is probably due to the settings or the nature of the image, you could create a new section with a different image adapted to mobile screen and then hide/show the sections with CSS if that’s an option for you?

    Regards,
    Rikard

    • This reply was modified 9 years, 1 month ago by Rikard.
    September 23, 2015 at 12:22 am #507426
    tdebrouwer

    Hi Rikard,

    Thanks for your reaction, the problem with my “portofolio” header is solved thanks to your help.

    Regarding the other issue with the images. If I can hide the “mobile” section for “desktop” screens and otherwise it shouldn’t be a problem for me.
    Could you explain to me how I can do this with css?

    Thanks in advance!

    September 23, 2015 at 7:43 am #507522
    Rikard

    Hey,

    Yes of course, it looks like you are using Color Sections and in each Color Section you have the possibility to give it a unique ID in the For Developers: Section ID option. So if you give the section you want to show on desktops an ID like description-desktop and the section you want to only show for mobile an ID like description-mobile you can show/hide them with the following CSS:

    @media only screen and (min-width: 768px) {
 #description-desktop {
display:block !important;
}
 #description-mobile {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #description-desktop {
display:none !important;
}
 #description-mobile {
display:block !important;
}
}

    Please let us know if it works out for you or not.

    Thanks,
    Rikard

    September 23, 2015 at 11:40 pm #508108
    tdebrouwer

    Hi Rikard,

    Thanks for your feedback, this solved my problems for the mobile website.

    Thanks again.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘website not showing correctly on mobile’ is closed to new replies.