Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 18, 2019 at 5:57 pm #1119966
    Cthulhus

    Hello
    Some elements aren’t so good on mobile phone. It’s nice on a computer I would like to change some aspect of a “grid row” but only for mobile phone.

    It’s possible?

    On the cell of a grid row, I would like to have : (look at the image)

    This is what I want that CSS for mobile :
    {
    height: 1000px;
    min-height: 1000px;
    background: url(https://les-cieux.fr/wp-content/uploads/2019/06/2019-05-26-11.09.09-1-728×1030.jpeg) top center no-repeat scroll;
    background-size: auto;
    vertical-align: top;
    padding: 30px;
    }

    and this CSS for normal mode (Computer, Ipad …)

    {
    height: 1000px;
    min-height: 1000px;
    background: url(https://les-cieux.fr/wp-content/uploads/2019/06/2019-05-26-11.09.09-1-728×1030.jpeg) top center no-repeat scroll;
    background-size: auto;
    vertical-align: top;
    padding: 30px;
    }

    Hope it’s possible !

    Thanks guys ! I love your theme

    • This topic was modified 5 years, 4 months ago by Cthulhus.
    July 18, 2019 at 9:12 pm #1120022
    Victoria

    Hey Cthulhus,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 18, 2019 at 10:11 pm #1120027
    Cthulhus

    Yes of course, the link is :

    Les Cieux de Saint-Félix, Maison d’Hôtes en Dordogne

    On mobile, the photos under the top silder aren’t good. So I would like to change the behavior of those pictures but only for mobile (or for small screens resolution). Please have a look at the image bellow, is what I would like :

    Thanks

    July 19, 2019 at 4:25 pm #1120250
    Victoria

    Hi Cthulhus,

    The css you posted above is the same. Do you have a mockup of what you’re trying to achieve?

    Glad you enjoy using Enfold :)

    Best regards,
    Victoria

    July 19, 2019 at 4:35 pm #1120259
    Cthulhus

    Yeah I saw that for the same CSS my bad.

    Go to the web site : http://les-cieux.fr/ and look the website on a large screen and you’ll that that all is nice. I love that page.
    but now look the website on a mobile phone screen and scroll a bit down and you’ll see that the pictures of grid row.

    The images fill the entire screen well but we see only a small part (the center part). I would like under Mobile the image is displayed in full. (like we can have if we select the setting from this image :

    I gave you the admin access on the other topic, so you can access if you need.

    Thanks and sorry for my English.

    July 22, 2019 at 10:55 pm #1121020
    Basilis

    Hi,

    can u provide the access here also?

    Best regards,
    Basilis

    July 24, 2019 at 2:40 pm #1121552
    Cthulhus

    Of course, here we go

    Thanks :)

    July 29, 2019 at 12:26 am #1122596
    Mike

    Hi,
    Sorry for the late reply, for mobile please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 766px) { 
#top.home .av-layout-grid-container .flex_cell.avia-builder-el-first,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-last {
    background-size: contain !important; 
}
#top.home .av-layout-grid-container .flex_cell.avia-builder-el-3,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-8,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-13 {
min-height: 100px !important;
}
#top.home .av-layout-grid-container .flex_cell.avia-builder-el-10,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-2,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-7,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-12,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-15,#top.home .av-layout-grid-container .flex_cell.avia-builder-el-5 {
min-height: 600px !important;
}
}

    Then clear your browser cache and check.

    Best regards,
    Mike

    July 29, 2019 at 7:07 am #1122647
    Cthulhus

    Thanks Mike ! It’s perfect now on mobile !

    Again thanks for your help and support !

    All the best

    July 29, 2019 at 9:42 am #1122672
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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