[Resolved] Need Help With GP Hooks & @media

[Mary Pearson]

Hi Tom,

My website at https://caribecampo.com looks fine on computer but

1. on iPad the bottom hook “above footer” is too wide, pushing the top of the page to the left, and

2. on the iPhone 4 the page is split in two (portrait or landscape) so that the left side has the title, images, right sidebar, and the right side has the translation options at the top with the hook being the proper full width at the bottom.

I’m assuming I need some @media coding for this but I haven’t a clue.

Would appreciate any help.
Many thanks!

[Tom]

In your .hook CSS – use max-width instead of just width.

Not too sure about #2, you’ll need to play with the way those elements are set up.

[Mary Pearson]

Thanks Tom. That fixed it on the iPad.

Could you give me some idea what you are referring to re <<you’ll need to play with the way those elements are set up.>>

I tried putting it in different hooks but I don’t know how to “play with the elements”

[Mary Pearson]

Interesting development. I added

@media screen and (max-width: 1024px) {
.hook {
display: none !important;
}

with the intention that I might try to figure out how to put that hook on another page completely but for some reason it is showing up on the home page exactly as it should so I will mark this resolved.

Thank you.

[Tom]

Glad you found a solution 🙂

[Author]

Posts