Geo not responsive to different laptop screens

This topic contains 27 replies, has 3 voices, and was last updated by  Paolo 9 years, 8 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • June 13, 2015 at 7:42 am #42444

    We Love Travel Group
    Free User
    Post count: 186

    Hi,

    We have been made aware that the Geo theme is not responsive when our websites are viewed on one laptop (ie a 13″ Mac) and then on a wider laptop screen (ie desktop 20″) The entire website comes out of alignment and is stretched, rather than it being centralized and everything staying the same size. The attached documents should help explain what I mean. Doc 1 & 2 are screen prints from our websites and the doc 3 is how we would expect geo to respond (someone elses website)

    You can view one of our websites at http://www.welovekohphangan.com

    I have tried to make appropriate changes to the site width etc but it is not having the required effect as you can see from the attachments. We feel that this is a pretty vital change needed to geo in order for websites to look good on both small and large screen laptops. This is not a matter related to be responsive to handheld devices. This is purely regarding normal computers/laptops etc.

    Thanks. I wait to hear back from you regarding this.

    June 13, 2015 at 8:22 am #42448

    Guust
    Moderator
    Post count: 29970

    If you do not want to stretch it past a certain width, then you have to set that width at GDF options > home settings > site width
    That is a maximum width and it will still be responsive.

    June 13, 2015 at 10:38 am #42450

    We Love Travel Group
    Free User
    Post count: 186

    Do you know a good standard width Guust? We have been playing around with different widths and still the pages are stretched on say a 21 inch monitor, and squashed on a 13 inch macbook.

    June 13, 2015 at 11:01 am #42453

    We Love Travel Group
    Free User
    Post count: 186

    Have set the site to standard width and now on any screen over 750 the mobile menu is then gone and it starts using the normal website menu. When it does it moves the menu to the right and drops categories off and below, this then causes problems with the menu.

    http://www.welovekohphangan.com

    is there anything that can be done to rectify this please?

    June 13, 2015 at 11:08 am #42454

    We Love Travel Group
    Free User
    Post count: 186

    its the break point or responsive limit that needs changing. Not sure how this is done though. Think its 1050 before the mobile menu then goes to standard menu, if that makes sense.

    Hope you can understand what im trying to say…lol…

    June 13, 2015 at 3:31 pm #42461

    Paolo
    Site Admin
    Post count: 31211

    Hi,

    currently you are using 1200px as max width of your website.

    On a fullHD 1920×1080 resolution it will look narrower than on any lower resolution monitors.

    The bigger and better the screen, the wider will be the margins on the sides.

    This is normal.

    Let’s make an example. wordpress.org see image attached.

    With resolution 1600×800 the spaces on the right and left of the website container are much wider than on resolution 1280×768.

    Our templates are designed using media query standards.

    1 layout for desktop and laptop (no matter the resolution)
    1 for tablet landscape
    1 for tablet portrait
    1 for mobile landscape
    1 for mobile portrait

    The best solution would be to reduce your max-width to something lower than 1200px in order to avoid seeing it completely streatched on very small resolution laptops.

    You can also use media queries to make sure it looks identical on any screen resolution, but that’s not what we offer.

    Thanks

    June 14, 2015 at 9:50 am #42503

    We Love Travel Group
    Free User
    Post count: 186

    We have set the width to standard now 1040 px. The issue is not with the margins, it is not a problem for them to be changing sizes and we know this is normal, the problem is that the written content within the site is getting moved around and messed up on different size screens. It is really bad on normal pages.

    For example, if we align text within a page to sit next to a picture on a larger screen, when that is viewed on a smaller screen it moves text out of alignment. Same other the other way round. That is not normal and this is part of the theme so is there anything you can do about this?

    Also regarding the mobile responsive issue, most people use mobile devices now. on small devices such as phones the mobile menu works as it should. On an ipad for example if you hold it upright the mobile menus works as normal, but turn it on its side and the mobile menu changes to normal website menu. This menu is then moved along to right side and drops off under neither, making it looks bad and useless.

    Surly this is also a GEO issue as the settings are not right for mobile devices. We are happy to add any changes if you tell us what and where to add them.

    Thank you.

    June 14, 2015 at 10:18 am #42504

    We Love Travel Group
    Free User
    Post count: 186

    having looked at your website it all works as normal by making the boarders larger or smaller yet keeping the content inside the same size. Have also looked at some other geo sites using same theme and they also work correctly. On our sites this is not working the same. The content area is not staying the same size and is stretching or getting compressed.

    Please let me know what is causing this.

    Thank you

    June 14, 2015 at 10:36 am #42505

    We Love Travel Group
    Free User
    Post count: 186

    UPDATE.

    have put site to standard size of 1040 px and now it is responding to different size screens. But FYI changing to any other size seems to mess up all the content.

    Still require the responsive menu issue to be rectified though.

    Thank You

    June 15, 2015 at 2:59 pm #42558

    Paolo
    Site Admin
    Post count: 31211

    On tablet portrait it is normal to show the default menu and not the mobile.

    The problem there is a menu with too items or too much space between them.

    Try adding this in GeoDirectory >> design >> script >> custom css.

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    header nav .nav li a {
    padding: 0.70em;
    }
    }

    Let us know,

    Thanks

    June 15, 2015 at 3:57 pm #42575

    We Love Travel Group
    Free User
    Post count: 186

    Tried that code and didnt work so taken it back out. If you inspect the elements and look through the different devices you will see the exact size that the menu changes and drops off.

    Thanks Paolo

    June 15, 2015 at 5:46 pm #42590

    Paolo
    Site Admin
    Post count: 31211

    Hi,

    that code, I’ve tested with an emulator on your website.

    It should work if applied correctly. Please provide wp admin credentials and I will give it a try.

    Thanks

    June 16, 2015 at 4:02 am #42636

    We Love Travel Group
    Free User
    Post count: 186
    This reply has been marked as private.
    June 16, 2015 at 3:20 pm #42706

    Paolo
    Site Admin
    Post count: 31211

    Hi,

    I’ve added it directly to the theme css and had to tweak it a bit, but now it works, you can test here: http://ipadpeek.com/

    Thanks

    June 17, 2015 at 4:42 am #42825

    We Love Travel Group
    Free User
    Post count: 186

    Hi Paolo,

    Just looked and the menu is still dropping off underneath? Which in turn makes the menu useless.

    Is there no way to add code so that the mobile menu stays on for ipads and similar sized mobile devices?

    Thanks

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 28 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount