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

    Hi it has been fun playing with the advanced backend drag and drop layout builder, and I have managed to make something that feels really beautiful and it is working great for desktop and laptop via Chrome, but looking bad on mobiles and cellphones.

    Would you please be able to have a look and advise on what I can do? aka HELP :/

    Thank you

    #575626

    Hi prettyfish,

    I couldn’t see anything obviously wrong with your site on mobile, could you post screenshots of the issues please?

    Regards,
    Rikard

    #575652

    Hi Rikard, thanks for your reply! There is text and copy in the dark / dark green areas between the light-brown scrolls, which is supposed to show just on the scroll. If you compare it to what you see on a desktop or laptop it will be obvious because the formatting and spacing has gone all weird with the responsive version.

    Let me know if you will still need a mobile screenshot.

    Cheers!

    #576241

    Hi,

    Ok, I think I understand what you mean. Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Regards,
    Rikard

    #576261

    Thanks! Here is it Rikard

    #576859

    Hi,

    Because the background image you have chosen is set to repeat it’s almost inevitable that some of the text will eventually display over the dark area of the image and not be readable because of it. It will be very difficult to adjust that for every screen size, maybe you want to not display the background image for mobile? If not I think you will have to do a separate version for mobile only. Let us know what you would like to do and we’ll give you some custom CSS to use.

    Thanks,
    Rikard

    #576926

    Hi Rikard, thanks for clarifying and looking into this.

    What do I have to do to make another one for mobile with the background image? And what do I have to do to make a mobile version without the background?

    I would prefer to keep the image.

    Cheers,

    Candace

    #577562

    Hi,

    If you want to make a separate version for mobile, you can activate the custom CSS field for all element: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, then add the following class to the elements you don’t want to show on mobile: not-visible-on-mobile, and this class to the elements you do want to show only for mobile: visible-on-mobile. Then add the following to Quick CSS:

    @media only screen and (max-width: 767px) {
    .not-visible-on-mobile {
    display:none !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    .visible-on-mobile {
    display:none !important;
    }
    }

    If you want to remove the background image for mobile only you can try the following in Quick CSS:

    @media only screen and (max-width: 767px) {
    .page-id-130 .avia-builder-el-3 {
    background-image: none !important;
    }
    }

    Thanks,
    Rikard

    • This reply was modified 8 years, 10 months ago by Rikard.
    #578958

    Thanks so much Rikard. The logistics of making a new version for mobile only is hurting my brain.

    If there is someone you could recommend to help me with it for a small fee of course, please let me know.

    Otherwise I am going to try the version that allows the mobile version to have no background.

    Thanks so much!

    #579393

    Hi,

    If you need to hire a freelancer we recommend Codable, otherwise you can have a look at upwork.com where you can find a lot of freelancers as well.

    Thanks,
    Rikard

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