[Resolved] Hook Alignment

[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

[Leo]

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;
    }
}

[Paul]

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

Image

Above 1200px it’s fine

[Leo]

Try removing this CSS you’ve added:

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

[Paul]

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

[Leo]

That’s what #1 here does: https://generatepress.com/forums/topic/hook-alignment/page/2/#post-360281

Can you try removing it? Thanks!

[Leo]

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

[Paul]

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

[Leo]

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

[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.

[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.

[Leo]

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;
    }
}

[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

[Leo]

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;
    }
}

[Paul]

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

[Author]

Posts