Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 13, 2016 at 3:59 pm #698809
    Angelo

    Hey Guys,
    I was wondering if it is possible to have 3 colums on the same row on mobile landscape just like how it is on desktop version. I have a portfolio to show and i want them next to eachother on mobile landscape. Now i have this code

    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 33.3%;
    }

    Wich works fine for me but i want this only for the homepage and not the other pages. Is that possible? When i add the page id before the code it doesnt work.

    October 13, 2016 at 4:08 pm #698822
    Yigit

    Hey Angelo,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your column elements and give them a custom CSS class and then change your code to following one

    .your-custom-class {
margin: 0;
margin-bottom: 20px;
width: 33.3%;
}

    Best regards,
    Yigit

    October 13, 2016 at 4:13 pm #698827
    Angelo

    Sadly enough this doesnt work. i gave all the 1/3 elements on the homepage the same classname. It still shows only 1 row instead of 3.

    home

    October 14, 2016 at 9:08 am #699014
    Guenni007

    can you please try this :

    @media only screen and (min-width: 360px) and (max-width: 767px)  and (orientation: landscape) {
#top.home .no_margin.av_one_third {
    width: 33% !important;
}
}

    you have to play yourself with these values a bit. i can not simulate it via Firebug or something like this for iphone or ipad – you have to set the rule first and than we will see.

    if you want it globaly get rid of the orientation: landscape
    the min-width should be corrected and the max-width perhaps if you like to set rules for tablets too.

    • This reply was modified 8 years, 2 months ago by Guenni007.
    October 14, 2016 at 9:50 am #699021
    Angelo

    Thanks for your answer but this doesnt work either. I have an code special for mobile Portrait and mobile landscape for the custom css but the code its self for this function doesnt work.

    October 14, 2016 at 10:07 am #699023
    Guenni007

    if you take the code globaly :

    .responsive #top.home .no_margin.av_one_third {
    width: 33% !important;
}

    it works ! you have to find the settings for your landscape option – try to insert that code first and see if it works globaly for your homepage

    October 14, 2016 at 10:09 am #699024
    Guenni007

    aha : there comes a class with small screens:

    @media only screen and (min-width: 360px) and (max-width: 767px)  and (orientation: landscape) {
.responsive #top.home .no_margin.av_one_third {
    width: 33% !important;
}
}
    October 14, 2016 at 10:15 am #699025
    Guenni007

    why did you use the custom.css ?
    on the majority of all cases the quick css will do the job too!

    if the code above works for you only insert the .home class ( you see just behind #top : #top.home ) that is the specific code for homepage.

    if you only wants to have it for landscape see mediaquerie above

    October 14, 2016 at 11:34 am #699046
    Angelo

    Yes the quick css is what i am using first to test it. if it works i place it in the custom.css.
    As far as i can see it works now!
    Can you see if it works with you too? Thanks!

    October 14, 2016 at 8:34 pm #699289
    Guenni007

    it works here on my iphone – but i thought you like to have it only for landscape.

    did you use it with the media querie ? – edit – yes i see it.

    try it with:

    @media only screen and (min-device-width : 375px)  and (max-device-width : 667px)  and (orientation : landscape) {

}

    the min-device-width is a bit more specific to device option than the code above

    you have to play a bit with the values : see here the device values: http://stephen.io/mediaqueries/

    October 14, 2016 at 10:39 pm #699315
    Angelo

    Yes, i also did it for Portrait. I showed my cliënt this because he wanted that so. I only have to try to make the size beteren the Pictures the same as the under the Pictures and the overlay text needs to be fixed but ill fix that later

    October 18, 2016 at 10:42 am #700556
    Vinay

    Hi,

    As I understand, the current version of the homepage has 3 col view in mobile(landscape and portrait), tablet and desktop.

    You like to make the 3 col image grid a 1 col in mobile portrait correct?

    Do do so please add the below code to Enfold > General Styling > Quick CSS

    @media only screen and (max-width: 520px) {
.responsive #top.home .no_margin.av_one_third {
    width: 100% !important;
    min-width: 100% !important;
}}

    If the above don’t work please enable custom css class name support to the grid and use the custom class name to target the grid.

    kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    If you have any issues please get back to us with the login credentials so we can take a closer look and help you better.

    Best regards,
    Vinay

    October 18, 2016 at 10:58 am #700564
    Guenni007

    no vinay the other way round – he wants the 3 column for mobile view too. I understand him so , that he wants it only for landscape – so my media-queries should do the job. But now he likes to have the margin bottom/top the same as left/right.

    i can not see a big difference between those distances – you only can try to make it relative – so you have on small pictures not absolute distances.

    .responsive #top.home .no_margin.av_one_third {
    margin: 0 !important;
    padding: 2% 0 !important;
    width: 33.3% !important;
}
    October 19, 2016 at 11:13 am #701138
    Andy

    @Guenni007
    Thank you as always!


    @Angelo-ufirst
    Let us know if this helps.

    Best regards,
    Andy

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