Border around elements (except home page)

Can you link us to this exact page to inspect why it occurs?

Note: Perhaps it's a caching issue. You may wanna try clearing some cache first. :D

Sure, it's on all of the pages (except the home page where the border is turned off) when the web browser's view is Zoomed smaller. In Firefox, it's View-Zoom Out from the Menu.

https://www.furrynation.com/photos-video/

I see.

On the hook element containing the element tag <div class="bordered-header">

Try changing it to <div class="bordered-header grid-container">.

This should match the sizing regardless of viewport size.

Thank you, I changed the hook element tag and I didn't see a change (and I cleared the website's cache). Do I change the CSS as well?

@media (min-width: 769px) {
.bordered-header {
border: 2px solid #ffffff;
border-bottom: none;
padding-top: 30px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
}

.bordered-header nav#site-navigation {
border-bottom: 2px solid #ffffff;
}
}

Thank you, I changed the hook element tag and I didn’t see a change (and I cleared the website’s cache). Do I change the CSS as well?

Try clearing browser cache.

I see the change on my end as shown here - https://share.getcloudapp.com/geudWAqn

The issue was because the bordered header doesn't have the max-width to match the rest of the content. (content has max-width of 1500px.)

Adding grid-container class to the bordered-header adds this max-width so all the contents match in width.

Thank you, I'll see if the client's happy with the fix (even with the cache cleared, I see the border breaking when it's zoomed out quite a bit, but the type's super small). I appreciate your help! -- Geoff

No problem. Let us know how it goes. :D