Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 30, 2014 at 9:29 pm #272588
    charger70

    Hi – please see the attached images for some issues i’m having with the display of the logo in mobile, along with issues on the top/secondary menu.

    iphone display - meny overprinted by menu icon

    on iphone, the logotype (which is 340px wide) is being overprinted by the menu icon. shouldn’t the logo resize to allow both the logo and menu to appear without overprinting?

    ipad horizontal orientation - background showing plus logo overprint/cut off

    on ipad in landscape orientation, parts of the background image are just barely showing – shouldn’t this be suppressed for all mobile display? also – the menu is being overprinted by the navigation – i have navigation set to the smaller dimension to force the mobile menu on all mobile devices, but apparently this is not working.

    finally, on ipad in portrait orientation, the mobile menu appears as designed, but the secondary menu is a mess and does not display properly – battling for space with the message / phone number:

    ipad portrait - top menu is a mess

    any help you can provide would be greatly appreciated. thank you.

    June 2, 2014 at 12:58 pm #273220
    Yigit

    Hi charger70!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
margin: 0 auto;
max-width: 85%;
height: auto !important; }}
@media only screen and (max-width: 990px) {
.sub_menu li { padding: 0 5px; }}

    I cannot reproduce the second issue, have you already figured it out?

    Cheers!
    Yigit

    June 2, 2014 at 6:46 pm #273424
    charger70

    Hi Yigit!

    Unfortunately, the problem is still here after adding the Custom CSS code. see below:

    IPHONE LOGO CUTOFF
    note that the logo is being overprinted by the mobile nav icon

    IPAD PORTRAIT NAV ISSUE – note how the upper navigation (secondary nav) is stacking and pushing down the message set to appear top left

    IPAD LANDSCAPE ISSUE – note how the upper nav/secondary is stacking just like on portrait – plus the mobile nav is NOT showing, AND the background images are showing slight on the left and right – shouldn’t those be suppressed on all mobile?

    thank you for your help!

    June 3, 2014 at 2:36 am #273681
    Ismael

    Hey!

    Thank you for the screenshots.

    Please try to use this on Quick CSS or custom.css:

    @media only screen and (max-width: 1024px) {
.sub_menu li {
padding: 0 5px;
font-size: 10px;
}

div.phone-info.with_nav {
width: 100%;
text-align: center;
margin: 10px 0 0 0;
}

.av_secondary_right .sub_menu {
float: none;
}

#top .sub_menu>ul {
float: none;
margin: 0;
display: inline-block;
}

.av_secondary_right .sub_menu {
float: none;
width: 100%;
text-align: center;
}
}

    This should resize and center align the secondary menu then move the phone number below it when viewing on smaller screens.

    Cheers!
    Ismael

    June 3, 2014 at 4:45 pm #273983
    charger70

    hi ismael – well, this resolved the iphone issue.

    by the way, i left in Custom CSS the previous code given to me by yigit. should that have been removed?

    unfortunately, ipad is still a problem – see below. this is not resolving. i have gone ahead and shortened the top / secondary menu by deleting elements (that should be there, but i can tell that having too many is not good).


    On portrait, you can see the secondary nav is now left-aligned (it was right), and the message/phone position is now CENTERED! neither of these are desirable.

    the nav should be right-aligned; the message should be left-aligned. and in my thinking, the message should appear OVER the secondary menu, not below it.


    Landscape shows the same issues as portrait, PLUS the background image is still showing small amounts. why is this continuing to happen? it should be disabled for mobile, YES?

    please, can we get solutions to this? i shouldn’t have to go through this for what are basic features of the theme.

    June 4, 2014 at 7:44 am #274399
    Dude

    Hey!

    Please try to insert this code into the quick css field:

    
@media only screen (min-width: 768px) and (max-width: 1024px){
div.phone-info.with_nav {
width: 100%;
text-align: right;
margin: -28px 0 30px 0;
}

.av_secondary_right .sub_menu {
float: right;
width: auto;
margin-top: 25px;
text-align: center;
}

.bg_container{ display: none; }
}

    Regards,
    Peter

    June 4, 2014 at 7:58 am #274403
    charger70

    no change.

    note that i am leaving all the previously recommended code in Custom CSS.

    i did attempt to remove all the earlier code and use just what you have recommended, peter, but that made things worse. so i reinstituted the older code, along with yours.

    no change.

    very frustrating. are kriesi people looking at this issue on ipads and iphones to confirm the grabs above?

    June 4, 2014 at 8:02 am #274405
    charger70

    to reconfirm: no change. on ipad (iphone is acceptable but not great)

    the secondary/top nav continues left aligned.
    the message / phone position is centered on ipad.
    the logo is cut off by overprinting by the main nav on landscape orientation.
    in addition, there is now a gray “rectangle” appearing in the lower half of the logo, despite it being a transparent PNG.

    in short, it’s worse now than when we started.

    and the background image continues to show on landscape orientation. it should not show at all.

    June 5, 2014 at 8:07 pm #275283
    charger70

    on a related subject, please see here:

    http://www.langersdeli.com

    i changed the background color for the header, but a portion of it remains the older color – i have all the settings the same new color code. any ideas why?

    June 6, 2014 at 3:49 am #275424
    Ismael

    Hey!

    Thank you for the update. Please refrain from bumping the thread. It will only move the post below the queue.

    First, please try my suggestion and remove Yigit’s and Dude’s code. If that doesn’t work, remove my code then add Dude’s. The suggestion should center align the secondary menu then move the phone number below.

    Regards,
    Ismael

    January 8, 2016 at 3:34 pm #562013
    wayfareescort

    Hi guys,

    older topic, I know. However, I have been successfully using the latest development of this code in order to center both social icons as well as phone number and email on mobile devices.

    However, I am unable to center texts and logos both horizontally or vertically on a normal website. I have been using your quick CSS from.

    Help needed. :)

    January 8, 2016 at 3:39 pm #562021
    Yigit

    Hey!


    @wayfareescort     Please post the link to your website and a screenshot showing the changes you would like to make so we can provide you accurate custom CSS code :)

    Best regards,
    Yigit

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