[Resolved] Responsive screen width

Home Forums Support Responsive screen width

Viewing 15 posts - 1 through 15 (of 39 total)
  • Author
    Posts
  • #75147
    Naomi

    Hi there,

    I am using Generate Press and the SiteOrigin Page Builder plugin I saw you recommended to someone when they asked about creating page layouts.

    At the moment there are two ways the site can be viewed – full (desktop computer and landscape tablet) and mobile (portrait tablet and smartphone).

    I was wondering if there was a way to change where the full/mobile breakpoint is (e.g so I could have the full site on the portrait tablet, and only the mobile on smartphone devices)?

    I’m guessing the above might be easier than my second question – is it possible to display a different “in between” layout on portrait tablets, along the lines of Bootstrap’s xs/s/m grid layout views?

    By the way, thanks very much for the Generate Press product. I have only ventured back into the world of WordPress recently and GP has massively impressed me.

    Cheers,
    Naomi

    #75194
    Tom
    Lead Developer
    Lead Developer

    Hi Naomi,

    At this time, you would have to edit the core mobile.css file and change the break point manually – not a big deal, but updating the theme would change it back.

    I do have plans to make it much easier to change the break point – it will hopefully be in GP 1.2.9.

    As for the second question, you can use your own media queries in your custom stylesheet to create new breakpoints and change CSS for those sizes – more info on media queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

    #88517
    Timm

    Hey Tom,

    as I’m currently using 1.2.9, is there a more subtile version of setting the width at wich the site switches to mobile-view?

    Thanks!
    Timm

    #88754
    Tom
    Lead Developer
    Lead Developer

    I did include a way to do this in 1.2.9, but it’s causing conflicts with caching and minifying plugins (http://generatepress.com/forums/topic/naviation-menu-changed-after-update-1-2-9/).

    There’s a new version coming out with reverts this change to stop the caching issues.

    I’ll have to talk with some developers about the best way to go about this before adding that functionality.

    #98495
    Szabott

    Hello there.

    I would like to say thank you for this awesome theme and I’m also interested in a better way to set the breakpoint. It’s not extremely important as it’s quite easy to do it manually, but a better way would be appreciated.

    Thank you.

    #98504
    2fer

    Hi Tom,
    I’m looking into making this change myself – but there is more than one file to edit (mobile.css and unsemantic-grid.css) and one uses a max-width, the other a min-width. It keeps the sidebar but loses the desktop type navigation bar though it should fit fine. My problem is that without editing the core .css files I can’t test. I can try one file without uploading it, but not two at once. I was just in there minifying the child-theme style.css (I needed to alter the captions appearance) and I noticed that there is a new update to the GeneratePress theme. So I thought it best to ask if it’s better to update first or do those files have other changes? Are there additional options for breakpoints in the newer version (v.1.2.9.3)? My site can display fine on a tablet in portrait mode, but it gets forced to a mobile view and my visitors apparently don’t like it. It also moves wrapped text and the image it wraps to separate lines leaving a big white blank spot at the top. I’m trying to maintain the desktop view down to 720 – 740 where it gets crowded.

    I looked around here for details on the update, but I think you might be too busy at the moment to get that info down to this level. Understandable.. 🙂 – and Thank you!

    #98631
    Tom
    Lead Developer
    Lead Developer

    I was hoping to create an easy way to change the mobile breakpoint in a previous version – unfortunatley plugins like W3 Total Cache and other caching plugins don’t allow for what I was trying to do, as they minify the files and ignore the media queries set inside the link to the stylesheet.

    For now, the only way to change the mobile breakpoint is in the mobile.css file.

    Doing so will require you to re-change it every time you update the theme.

    I’m hoping to find a better way to do this, and may even talk to the developers of these minifying plugins to see if there’s a way that their plugins will ignore links with media queries built into them.

    1.2.9.3 doesn’t include any changes to the mobile stylesheets, but if you made any changes to them, you’ll have to make the changes again once you update the theme.

    You can always create your own CSS definitions in your child theme using your desired mobile breakpoints.

    For example:

    @media (max-width:740px) {
          /* CSS in here will come into effect when the browser hits 740px and below */
    }

    You can overwrite styles in the mobile.css file using the method above.

    Hopefully we can get this sorted out ASAP, and I can include an option in the Customizer for users to choose their own breakpoint.

    Hope this helps – let me know if either of you need more info 🙂

    #114002
    john

    Hi Tom

    any update on changing the break point. without having to redo each update? I need to go down to 767 as you used to have it because a lot of the ipads are 768 wide when vertical and my client wants the desktop look on that size not the mobile menu…

    #114016
    Tom
    Lead Developer
    Lead Developer

    GP 1.3.0 (next version) now uses 767px as opposed to 768px as we’ve introduced tablet support, so hopefully the next update takes care of this for you 🙂

    #131122
    john

    Hi Tom

    any chance this has been rechanged back to 768? I am seeing mobile menu now at 768 pixels?

    thanks
    John

    #131135
    Tom
    Lead Developer
    Lead Developer

    The mobile menu kicks in at 768px (portrait tablets and below).

    The rest of the mobile style kicks in at 767px (mobile).

    #131167
    john

    Hi Tom

    ok so you changed it then? my sites no longer display right when at 768px, the mobile menu is messed up etc, doesnt actually look right, basically i want the desktop look at 768, mobile look at 767 not a mix of the 2? how can I accomplish this now?

    thanks will email you my sites

    #131269
    Tom
    Lead Developer
    Lead Developer

    You can copy the mobile.css file and make the changes in your child theme, but then you don’t get any updates we make to mobile.css.

    I’m researching a way to make this much easier using SASS – hopefully to something implemented very soon.

    #131691
    John MacKenzie

    Hi Tom

    thanks. i copied out the file and edited the line

    @media (max-width: 768px) {

    to
    @media (max-width: 767px) {

    but no love?

    ive made some other fidly changes, and the mobile menu appears nicely now at 768px but i want the regular menu still. so i think my last issue is the regular menu will not show up on the left sidebar at 768px. (the nyr2 one is the one i am working at as per my email)

    thanks!

    John

    #131718
    Tom
    Lead Developer
    Lead Developer

    The best way to do this is to dequeue the core mobile.css file, and add your own: https://gist.github.com/generatepress/9282385984459c7ac6f2

    So if you place your custom mobile.css file in your-child-theme/css, this should work.

    Then you can adjust the media queries quite easily.

    The only downside to this is that you won’t get our future updates to the mobile.css file. However, if you check our changelog to see if any changes were made to it, you can keep it up to date quite easily.

    Wish their was an easier way to edit the media queries – I’m still searching.

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