[Resolved] Resizing issues

Home Forums Support [Resolved] Resizing issues

Home Forums Support Resizing issues

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #289067
    Jennifer

    So, my resizing issues are related to the CSS I used to specify certain elements be a specific size for my blog and blog posts (.post and .single <thanks, Leo!>, being the modifiers I used). I was wondering if there was a way to insert additional CSS to tell it to ignore the specific sizing for mobile and auto-adjust accordingly? I played around with a bunch of different variations for hours and hours a few days ago, but was (obviously) unsuccessful.

    Thanks for all the help!

    Jen

    GP Premium 1.2.94
    #289084
    Leo
    Staff
    Customer Support

    Hi Jen,

    Not really sure what the question is but I think you are looking to add some device specific CSS?
    If so this should help: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

    When you specify an element to a specific size, are you using width or max-width? only max-width would be responsive.

    #289149
    Jennifer

    Hi Leo,

    I am just using width, but when I change it to max-width and follow the instructions from that post it overrides my specific sizing. No other options, huh?

    #289159
    Jennifer

    This worked for me:

    .single .inside-article,
    .comments-area
    {
    width: 800px;
    margin-left: -250px;
    }


    @media
    only screen and (max-width: 480px) {
    .single .inside-article,
    .comments-area
    {
    width: auto;
    padding top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
    }
    }

    .inside-right-sidebar
    {
    padding-left: 150px;
    width: 350px;
    }


    @media
    only screen and (max-width: 480px) {
    .inside-right-sidebar,
    .site-footer
    {
    width: auto;
    padding top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 0px;
    margin-right: 0px;
    }
    }

    Maybe it will help another poor dunce like me, haha! Thanks, you led me in the right direction! Now I have one more sizing issue, but not to do with REsizing:

    I would like my page header image to span the page (full-width) in my blog, but I can’t seem to achieve that. Help would be appreciated!

    Best,

    Jen

    #289256
    Leo
    Staff
    Customer Support

    Not sure if you are referring to the blog page header or post page header but this should help: https://docs.generatepress.com/article/page-header-content/#container-type

    They both have the same options. Just the blog page header is in the Customizer.

    Let me know if this helps.

    #289272
    Jennifer

    Hey Leo,

    I’m referring to the blog page header. That doesn’t help; making my image full screen makes it far too large and cuts off a significant portion of both ends. Maybe what I want isn’t possible?

    Best,

    Jen

    #289297
    Tom
    Lead Developer
    Lead Developer

    Do you have an example of what you’re needing to achieve?

    #289322
    Jennifer

    http://www.andersnoren.se/teman/lovecraft-wordpress-theme/

    Something like the above. I don’t want my content box to overlap, even though it looks pretty nice in the example.

    #289409
    Tom
    Lead Developer
    Lead Developer

    You can achieve that in the Blog Page Header (if you’re on the blog).

    Can you show me what you have so far?

    #289433
    Jennifer

    Tom,

    Using the blog page header section in the customizer KIND of works. If I add a “.” as dummy content and add 135px top and bottom padding, then I get this:

    https://s2.postimg.org/rpzferdk9/blog_v2.png

    The problem with that, is that it doesn’t resize properly for mobile.

    If I just upload it to the blog page header section in the customizer without doing anything else, I get this:

    https://s24.postimg.org/id49fpdad/blog_v1.png

    Which looks great on mobile, but I’m not digging so much on the desktop view.

    Thanks,

    Jen

    #289435
    Jennifer

    This is how the header I like the look of in the desktop version looks when resized in mobile, by the way:

    https://s16.postimg.org/9ocufa0hx/mobile_v2.png

    And this is how the header I don’t like the look of in the desktop version looks when resized in mobile:

    https://s10.postimg.org/hbwpynmgp/mobile_v1.png

    #289446
    Jennifer

    I found a solution, that will allow vertical mobile display to resize with the dummy content version properly. My question is, how can I see what it will do in a mobile display that is being used horizontally?

    This is the CSS I created to get the mobile to resize how I wanted:


    @media
    only screen and (max-width: 480px) {
    .blog .page-header,
    .blog .page-header-content
    {
    width: auto;
    height: 65px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    }
    }

    #289464
    Jennifer

    For anyone facing a similar issue, I realized I hadn’t addressed tablet view, so I added CSS for tablet and modified the height dictate in the mobile CSS with the !important afterward. In my particular example:


    @media
    only screen and (max-width: 480px) {
    .blog .page-header,
    .blog .page-header-content
    {
    width: auto;
    height: 65px !important;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    }
    }


    @media
    screen and (max-width: 768px) {
    .blog .page-header,
    .blog .page-header-content
    {
    width: auto;
    height: 165px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    }
    }

    I’m positive there must be more elegant solutions, but this works.

    #289505
    Leo
    Staff
    Customer Support

    Glad you found a solution and thanks for sharing 🙂

    Looks like you are pretty interested in CSS so thought I’d mention that you can shorten the padding/margin by doing something like this:
    padding: 5px 0px 5px 0px; (top, right, bottom, left).
    or even better:
    padding: 5px 0px; (top/bottom, left/right)

    #289563
    Jennifer

    Hey Leo,

    Thanks! I’ll have to rewrite what I have to shorten and clean everything up! That’s definitely handy.

    I really appreciate all your guys’ help!

    Jen

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