[Resolved] Apply this css to only desktop and align hamburger menu with the logo on mobile

Home Forums Support [Resolved] Apply this css to only desktop and align hamburger menu with the logo on mobile

Home Forums Support Apply this css to only desktop and align hamburger menu with the logo on mobile

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #665485
    Jesus Higuerey

    Hello,

    I have this css

    .post-image-above-header .no-featured-image-padding .inside-article .featured-image {
    	margin-top: -115px;
    box-shadow: 0 0 18px 0 rgba(205, 226, 255, 0.54);
    }

    Which makes the featured image overlap with the page header which is what I want: PREVIEW

    But the thing is that on mobile it looks horrible take a look: http://prntscr.com/kp6tg1

    Lastly, on that last image (http://prntscr.com/kp6tg1) you can see that the post title and the hamburger menu button are so close of each other, Is it possible to align the logo and the header? Doesn’t really matter if the logo becomes a bit smaller.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #665648
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Place your CSS inside a media query like this:

    @media (min-width: 768px) {
        /* Your CSS in here */
    }

    For the second issue, have you tried playing with our Mobile Header option?: https://docs.generatepress.com/article/mobile-header/

    Assuming you’re using our Elements module, you can use the “Offset Site Header Height” option in the Site Header tab to add the height of your header (or mobile header) on mobile. This will prevent your content from getting too close.

    Hope this helps!

    #665665
    Jesus Higuerey

    Hello Tom,

    The second issue is now resolved. Moving towards the first one, I did put the code inside the code you provided. I put the margin-top to 0 just to see how it would look on mobile but it didn’t even flinch haha

    #665841
    David
    Staff
    Customer Support

    Hi there,

    the code should look like this:

    @media (min-width: 768px) {
        .post-image-above-header .no-featured-image-padding .inside-article .featured-image {
            margin-top: -115px;
            box-shadow: 0 0 18px 0 rgba(205, 226, 255, 0.54);
        }
    }

    Remove any of the other code related to this, if it still insn’t working the try clearing any caches. And if still no joy then move that code to the top of your CSS.

    #666176
    Jesus Higuerey

    Hey There,

    The code above affects the desktop version, which is not what I want. I deleted the previous code but even if I touch it it moves the desktop version which is not what I want, I just want to lower the image on a phone/tablet

    #666204
    Jesus Higuerey

    It is now solved, I added padding to the Page Header when creating the element.

    #666319
    Tom
    Lead Developer
    Lead Developer

    The code above should have made it so the negative margin only applied on desktop. This would prevent any negative margin on mobile at all (unless your existing negative margin code was still added).

    Glad you found a workaround 🙂

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