Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 10, 2015 at 4:59 pm #426650
    jasksks

    Hi there,

    On my test site, I’m having problems adjusting the mobile responsive elements like the mobile menu, special headings and menu catalogue items to respond to an IPAD Air 2 portrait view.

    Have tried various CSS found on other forums posts but for some reason doesn’t work.

    • This topic was modified 9 years, 8 months ago by jasksks.
    April 11, 2015 at 6:33 am #426926
    Ismael

    Hi Jon!

    Thank you for using Enfold.

    You can add this to the Quick CSS field to fix the catalogue layout on smaller screens:

    @media only screen and (max-width: 1024px) {
.av-catalogue-price {
  position: relative;
}}

    Regards,
    Ismael

    April 11, 2015 at 6:51 am #426932
    jasksks

    Thanks Ismael, I will try that!

    The mobile menu as well as the special headers are also a problem on an Ipad air 2. Is there a CSS fix for that?

    April 13, 2015 at 4:28 am #427275
    Ismael

    Hey!

    Can you please elaborate the issue with the mobile menu and special heading elements? Screenshots will help. :)

    Regards,
    Ismael

    April 13, 2015 at 8:11 am #427341
    jasksks

    Hi Ismael,

    Here you go. The menu in question is the fullwidth sub menu here screenshot fullwidth sub menu

    I’ve got the following CSS input already which fixes all other responsive issues for portrait viewing on an IPAD Air. Is there a CSS for the fullwidth sub menu to set a max width at 1024px?

    @media only screen and (max-width: 1024px) {
    .av-catalogue-price {
    position: relative !important;
    }}

    @media only screen and (max-width: 1024px) {
    .av-catalogue-title {
    position: relative !important;
    }}

    @media only screen and (max-width: 1024px) {
    .av-special-heading.av-special-heading-h1 {
    font-size: 30px !important;
    }}

    @media only screen and (max-width: 1024px) {
    nav.main_menu { display: none !important; }
    #advanced_menu_toggle { display: block !important; }
    }

    April 14, 2015 at 9:48 am #428079
    Ismael

    Hi!

    The screenshot is not working when I checked it: http://thaivillagerest.cachetmedia.com/wp-content/uploads/2015/04/screener.jpg

    Cheers!
    Ismael

    April 14, 2015 at 11:57 am #428144
    jasksks

    Hi Ismael,

    Sorry here it is It should work now. screener

    I’m trying to see if there is a CSS for me to make the fullwidth sub menu responsive at 1024 as well

    • This reply was modified 9 years, 8 months ago by jasksks.
    April 15, 2015 at 1:39 pm #428900
    Ismael

    Hey!

    You can decrease the menu padding and font size on smaller screens:

    @media only screen and (max-width: 1200px) {
#top .av-subnav-menu > li > a {
  padding: 0px 5px 0px 6px;
  font-size: 11px;
}}

    Best regards,
    Ismael

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