Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 26, 2017 at 4:41 pm #739024
    td8000

    Hi Enfold Team,

    please help me with some issues concerning the display of my site in different resolutions/devices:

    – The Slider on my home page as well as the title bar on the other pages is not shown completely (upper part is cut) in certain resolutions like between 768px and 1050px or between 1100px and 1550px. i used these values in quick CSS to adjust my site but cannot explain, why this happens.

    – Layout Elements like columns in avia ca be hidden on mobile devices by using this option in the column settings. As i understand, they do that below 768px. Can i change this value?

    – I want the site to switch to mobile view at a width of 1050px. so i’d expect to see it in normal view like on desktop on my galaxy s2 tablet with a resolution of 1536 x 2048. but either in portrait or in landscape view i see the moile version. Why?

    Thanks for your help, Tobi

    January 31, 2017 at 5:26 am #740474
    Ismael

    Hey td8000!

    Thank you for using Enfold.

    1.) Did you add any css modifications for the header? Try to adjust the top margin of the slideshow to prevent if from being covered by the header container. 

    @media only screen and (max-width: 767px) {
     .av_slideshow_full.avia-slideshow {
         margin-top: 50px;
     }
}

    2.) Yes, this is possible. Add this in the Quick CSS field.

    @media only screen and (max-width: 1024px) {
.responsive #top .av-hide-on-mobile, .responsive #top .av-hide-on-tablet {
    display: none !important;
}
}

    3.) Could you please provide a screenshot of the site from your device?

    Best regards,
    Ismael

    January 31, 2017 at 12:53 pm #740589
    td8000

    Hi Ismael,

    thank you. I get along with 1) and 2) now. And here’s a screenshot of my Galaxy Tablet S2 in landscape mode.

    As said, it shoud be displayed like on desktop with a width of 1050/1100 (slider) or higher.

    The S2 specs: http://www.gsmarena.com/samsung_galaxy_tab_s2_9_7-7438.php

    The width is 2048px …

    What do you think?

    February 4, 2017 at 9:05 am #742714
    Ismael

    Hi!

    The actual device width of the Samsung Galaxy Tab S2 is 768x1024px because its css pixel ratio is 2 (http://www.canbike.org/CSSpixels/). Please adjust your css media queries for the sliders.

    @media only screen and (min-width: 1024px) {
     .mobile-slider {
         display: none !important;
     }
}

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

    Best regards,
    Ismael

    February 6, 2017 at 1:32 pm #743340
    td8000

    Hi Ismael,

    thanks. Never heard of “css pixel ratio”. How can this be understood? The pixels i see (in browser) on the S2 are 1024px in width (landscape)? What is the reason for this when the hardware has a width of 2048px?

    I set the breaking point to 1024 as you suggested and think this works fine on tablets now. Still i’d like to understand it.

    One more thing:

    On the site i gave you the link to above, you see 2 tiny white gaps (below first yellow box and below second blue box). Also there is a thin grey line below the last image, above the footer. I’d really like to remove them.

    Thanks again, Tobi

    February 10, 2017 at 5:45 pm #745519
    Andy

    Hi,

    use this code:

    div .flex_column {
min-height: 0px;
}
.flex_column.av_three_fourth.no_margin.flex_column_div.avia-builder-el-20.el_after_av_one_fourth.el_before_av_hr {
float: right;
}
.flex_column.av_three_fifth.no_margin.flex_column_div.avia-builder-el-27.el_after_av_two_fifth.el_before_av_hr {
float: right;
}

    Best regards,
    Andy

    February 10, 2017 at 6:35 pm #745548
    td8000

    Hi Andy,

    thanks, this does the trick fpr the white gaps. But there’s still that grey linke above my footer. As well on other positions on other pages like that one: http://neu.lebeneo.de/essen-belohnung/
    How can i get rid of them?

    All the best, Tobi

    February 10, 2017 at 8:46 pm #745579
    Basilis

    Hey!

    Please add

    .main_color { border: none !important; }

    Thanks a lot

    Regards,
    Basilis

    February 13, 2017 at 12:45 pm #746351
    td8000

    Hi Basilis,

    awesome. so easy :-) Grey line is gone and i am happy.

    As for Andy’s Code before:

    div .flex_column {
    min-height: 0px;
    }
    .flex_column.av_three_fourth.no_margin.flex_column_div.avia-builder-el-20.el_after_av_one_fourth.el_before_av_hr {
    float: right;
    }
    .flex_column.av_three_fifth.no_margin.flex_column_div.avia-builder-el-27.el_after_av_two_fifth.el_before_av_hr {
    float: right;
    }

    This affects as well other pages. How can i assign a page id to this code, so that it affects only one certain page (page-id 207)?

    Thanks so much, Tobi

    February 13, 2017 at 3:32 pm #746460
    Andy

    Hi,

    simply put .page-id-207 before every code starts, so like:

    .page-id-207 .flex_column.av_three_fifth.no_margin.flex_column_div.avia-builder-el-27.el_after_av_two_fifth.el_before_av_hr {
float: right;
}

    Best regards,
    Andy

    February 15, 2017 at 5:03 pm #747540
    td8000

    Great. Everything fine now.

    Thanks a lot, Andy.

    You can close the thread.

    February 15, 2017 at 10:17 pm #747699
    Basilis

    Hey!

    Thank you for updating us.
    Please remember to rate Enfold at Themeforest, we do appreciate that from your side.

    Thanks a lot!

    Regards,
    Basilis

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘responsive behaviour’ is closed to new replies.