[Resolved] Hook Alignment

Home Forums Support [Resolved] Hook Alignment

Home Forums Support Hook Alignment

Viewing 15 posts - 16 through 30 (of 32 total)
  • Author
    Posts
  • #360278
    Paul

    Ok that’s left in but bear in mind this does not produce the right result:

    below 360px – content breaks as it’s right aligned
    between 360px – 768px content again should be center not right aligned

    #360281
    Leo
    Staff
    Customer Support

    Thanks 🙂

    On desktop the two are not lining up because left padding is missing as suggested before.

    1. Replace:

    @media (min-width: 1025px) {
        .smb-before-header-content {
            padding-right: 40px;
            text-align: right;
        }
    }

    with

    @media (min-width: 769px) {
        .smb-before-header-content {
            padding: 15px 40px;
            text-align: right;
        }
    }

    2. Replace

    @media (max-width: 768px) {
        .smb-before-header-content {
            padding-right: 40px;
            text-align: right;
            padding-left: 40px;
        }
    }

    with

    @media (max-width: 768px) {
        .smb-before-header-content {
            padding: 15px 0px;
            text-align: center;
        }
    }
    #360287
    Paul

    Looks good but the right padding of 40px between 1024-1200px isn’t applied

    Image

    Above 1200px it’s fine

    #360309
    Leo
    Staff
    Customer Support

    Try removing this CSS you’ve added:

    @media (min-width: 1025px)
        .smb-before-header-content {
            padding-right: 15px 40px;
            text-align: right;
        }
    }
    #360312
    Paul

    No difference. Padding removed but without the right text align, the content is left aligned.

    #360315
    Leo
    Staff
    Customer Support
    #360316
    Leo
    Staff
    Customer Support

    You also have this CSS added:

    @media (max-width: 1024px) and (min-width: 769px) {
        .smb-before-header-content {
            padding-right: 40px;
            text-align: right;
        }
    }

    Can you try only using my CSS here? https://generatepress.com/forums/topic/hook-alignment/page/2/#post-360281

    #360450
    Paul

    Ok only the css you’ve described is applied. Content is not aligned at all above 1025px.

    #360559
    Leo
    Staff
    Customer Support

    Again you have this CSS added:

    @media (max-width: 1024px) and (min-width: 769px)
        .smb-before-header-content {
            padding: 15px 40px;
            text-align: right;
        }
    }

    It’s different than what I’ve suggested in #1 here: https://generatepress.com/forums/topic/hook-alignment/page/2/#post-360281

    #360580
    Paul

    That’s removed now too so the content pushes hard left with no padding at all above 768px. Above 768px I want to the content to have the same alignment as the main menu.

    #360585
    Paul

    I don’t understand what you’re suggesting in step one if that css I’ve just removed isn’t correct! Unless on step one you’re saying to create a new single breakpoint of min width 769px. Which isn’t in the breakpoints you’ve listed for GP.

    #360594
    Leo
    Staff
    Customer Support

    I don’t see this CSS in #1 being added which takes care of tablet and desktop?

    @media (min-width: 769px) {
        .smb-before-header-content {
            padding: 15px 40px;
            text-align: right;
        }
    }

    You also still have this which has syntax error:

    @media (max-width: 768px) {
        .smb-before-header-content {
            padding-right: 15px 0px;
            text-align: center;
        }
    }

    and it should be this as suggested in #2:

    @media (max-width: 768px) {
        .smb-before-header-content {
            padding: 15px 0px;
            text-align: center;
        }
    }
    #360596
    Paul

    So I do need to create a new breakpoint of min-width 769px which isn’t listed here? – https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

    #360597
    Leo
    Staff
    Customer Support

    No you don’t need to anything other than copy and paste the code I provided.

    Using this block:

    @media (min-width: 769px) {
        .smb-before-header-content {
            padding: 15px 40px;
            text-align: right;
        }
    }

    Is the same thing as using these two blocks:

    @media (min-width: 769px) and (max-width: 1024px) {
        .smb-before-header-content {
            padding: 15px 40px;
            text-align: right;
        }
    }
    @media (min-width: 1025px) {
        .smb-before-header-content {
            padding: 15px 40px;
            text-align: right;
        }
    }
    #360620
    Paul

    So yeah that’s a separate breakpoint, that’s where the confusion was. Works as intended now, thanks for your help.

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