• HoodSiegal
    November 6, 2014 at 7:39 pm #100576

    Hi –
    I am having some trouble with my menu sizing when changing to different screen sizes. I have a 7 item menu. I also have a link in the upper right top widget. Everything looks fine for desktop, but resizing the screen to tablet or phone sizes is the problem.

    iPad (Portrait View): http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=768&h=1024&a=22&s=1&p=1

    Upper right top widget disappears.
    Mobile menu appears as expected.
    Scrolling down a bit you will see a green button that says “Contact Us”, which is outside its container. Did not resize properly.

    iPad (Landscape View) and 10″ Netbook
    http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=1024&h=768&a=22&s=1&p=1
    http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=1024&h=600&a=1&s=1&p=1

    Menu does not display all items. I think it wrapped but the wrapped items are hidden under the carousel, as I can just barely make out the tops of the letters above the carousel background at the upper right.

    iPhone :
    http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=320&h=568&a=37&s=1&p=1

    Upper right top widget disappears altogether.
    Scrolling down a bit you will see a green button that says “Contact Us”, which is outside its container. Did not resize properly.

    I have not tested every combination of screen size yet, but this gives a good overview. If the screen is narrow enough to trigger the mobile menu, the problem is the upper right top widget disappearing. If the screen is not narrow enough to trigger the mobile menu, the regular menu wraps in a strange way, hiding some items.

    Could you please take a look? The link to the site itself is http://awb.webcraftconnect.com
    Thanks!
    Cindy

    Anna
    November 11, 2014 at 10:43 am #100634

    Hi Cindy

    Please see my answer below:

    iPad (Portrait View): http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=768&h=1024&a=22&s=1&p=1

    Upper right top widget disappears.

    –> That was removed intentionally as there was no room for 2 widgets in header.

    You can use this CSS to make it show

    @media only screen and (max-width: 992px){
    .right-top-widet {
    display: inherit!important;
    float: none;
    }
    }

    Mobile menu appears as expected.

    —> Ok.

    Scrolling down a bit you will see a green button that says “Contact Us”, which is outside its container. Did not resize properly.

    —> I don’t see it here http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=768&h=1024&a=22&s=1&p=1 Please help me find it.

    iPad (Landscape View) and 10″ Netbook

    http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=1024&h=768&a=22&s=1&p=1

    http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=1024&h=600&a=1&s=1&p=1

    Menu does not display all items. I think it wrapped but the wrapped items are hidden under the carousel, as I can just barely make out the tops of the letters above the carousel background at the upper right.

    You need to increase the menu width. Use this CSS in Admin – Design – Custom CSS

    @media only screen and (max-width: 1024px) and (min-width: 992px){
    #access {
    max-width: 800px;
    float: right;
    }
    }

    ———-

    iPhone :

    http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=320&h=568&a=37&s=1&p=1

    Upper right top widget disappears altogether.
    Scrolling down a bit you will see a green button that says “Contact Us”, which is outside its container. Did not resize properly.

    –> Please see my answer above.

    Thank you,
    Anna

    HoodSiegal
    November 16, 2014 at 1:19 am #100714

    Hi Anna –
    Sorry for the delay, I didn’t get an email notification that there was a response.

    I am willing to make changes to my own CSS to fix the problems above, but I also hope you can make adjustments to the theme in a future update so that items that are too wide for the display wrap gracefully. I would not expect an item in a responsive theme to disappear on a narrower screen because there wasn’t room. Expected responsive would be to display underneath the first header widget. Also with the menu, if it is too wide for the container it needs to go to the mobile menu, or the font size needs to decrease so that all items can still show.

    On my home page, with the link http://quirktools.com/screenfly/#u=http%3A//awb.webcraftconnect.com/&w=768&h=1024&a=22&s=1&p=1 if you scroll down to the section directly under the slideshow, you will see a white box with the words “Learn More About Investing in Alabama Real Estate”. It should slide in as you scroll down. Just below those words, but still in the white box is a green button that says “Contact Us Today”. It appears to have a fixed margin relative to its white container on the left, then displays outside the white box on the right. I would hope that a responsive button would resize itself to a smaller button when the container it is in resizes narrower than the button width.

    Thank you for your help.
    Cindy

    Anna
    November 19, 2014 at 2:46 pm #100781

    Hi Cindy,

    Please open a ticket in private here – http://support.wpestate.org/ If you need a pass reset, email me at annapx0909@gmail.com

    When it comes to CSS, working in browser preview is not easy. So please email me in private your site credentials. Will work on CSS and then, if there is something we need to review as core update option, we will.

    But there are settings in theme, like menu, which are forced to a width. And when you have more than the design, you need workarounds which can’t be all core.

    But I can help override with child theme style.css and you don’t lose a thing.

    Thanks
    Anna

You must be logged in to reply to this topic.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.