Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 1, 2015 at 9:49 am #452410
    aweirick

    Hello!

    For the dev site I am working on – I’m trying to find a solution to:
    1. Remove the extra white space above the content (this happens when holding the iPad in both horizontal and vertical views) – there is about a 30px gap from the grey line at the base of the header to the start of the Main content area. While on iPhone and desktop it’s fine.
    2. See if there is a way to remove the excess white space at the bottom of the expanded mobile/iPad menu view.
    3. Bring back the ‘x’ to close the menu in iPad view.
    4. See if the iPad menu can pop out to only 1/2 the screen width rather than take over the full screen?

    Site is http://cupcaketestsite.com.au/HamiltonRich/

    Thank you so much for your support,
    Alison

    June 2, 2015 at 5:33 am #452920
    Rikard

    Hi aweirick!

    1. Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.content {
padding-top:20px !important;
}
}

    2. I’m not sure I understand what you mean by that, do you mean the space under the map?

    3. Please add the following to Quick CSS as well:

    @media only screen and (max-width: 1200px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
  display: block !important;
}
}

    4. Please add the following to Quick CSS as well:

    @media only screen and (min-width: 768px) and (max-width: 1200px) {
.avia_transform3d .show_mobile_menu #mobile-advanced {
  transform: translate3d(-50%, 0, 0) !important;
}
}

    Regards,
    Rikard

    • This reply was modified 8 years, 11 months ago by Rikard.
    June 2, 2015 at 6:10 am #452924
    aweirick

    Hi Rikard,

    Thanks so much for the feedback. I tried all the fixes, but only one worked…
    1. I applied the css provided. But the padding appears in iPad view above the main image – see yellow highlighted area in the screen grab attached. It’s only in iPad view that it is affected like this. The css code seemed to only affect the padding between the main image and the icon boxes below.

    2. The space is related to the expanded menu view – it takes over the whole screen rather than the menu finishing on the last item. See screen grab attached in link – space I’m talking about is highlighted in yellow.

    3. Fix worked thank you!

    4. I applied the code provided to the css, but there was no change – the menu still takes over the whole screen. Any other options to try?

    http://cupcaketestsite.com.au/HamiltonRich/wp-content/uploads/2015/06/Menu-expanded.jpg
    http://cupcaketestsite.com.au/HamiltonRich/wp-content/uploads/2015/06/Space-above-content.jpg

    Many thanks,
    Alison

    June 3, 2015 at 12:18 pm #453693
    Andy

    Hey!

    1.) Try this code instead: 

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.html_header_top.html_header_sticky.html_bottom_nav_header #main {
padding-top: 90px;
}}

    2.) Try this code:

    ul#mobile-advanced {
min-height: 500px !important;
}

    4.) Try this code:

    ul#mobile-advanced {
width: 800px;
}

    Hope this helps!

    Cheers!
    Andy

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