Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Brandon Brigham
Brandon Brigham
3,716 Points

How to fix anchor id's for sections of website for mobile

Hello,

This is the site I'm working on:

If you view this site on mobile (the home page) when you click on the arrow on the bottom of each picture section it takes you to the next section but is not completely lined up correctly like on the desktop version.

Any ideas on how to fix this?

Thanks!

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

All of your chapter headers are offset to accommodate a fixed header at the top of the page, but below 1000px, the fixed header is no longer there (but the offsets still are).

You probably want to drop the offset when you quit using the fixed header. I was going to make a code suggestion, but I wasn't able to see how the "section#" element id's get assigned - is that a function of one of the many plug-ins?

Also, I spotted some stray HTML code at the end of "custom_js.js". It causes a syntax error, but that's only seen when you have the JS console open.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The offset method used on the home page is different from the one we talked about for the other pages, perhaps it's even better but as I said, I wasn't able to spot how the id's are established (there's a HUGE amount of code in all the plug-ins used!).

Your hardcoded header is apparently only for certain media sizes. The problem on the home page doesn't show up while the header is there. It only shows up when the header is NOT there on widths below 1000px. The anchor target is still the same, but without the header there it appears to be too high.

Brandon Brigham
Brandon Brigham
3,716 Points

Hmmmmm....

Man I wish the theme just supported a sticky header for mobile out of the box - seems like that would solve this pretty quickly... Do you think there's a better way to approach hard-coding the sticky header in the mobile site?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

But the header is NOT applied to the mobile sizes - that's what's causing the issue.

Did you WANT it applied to the mobile media sizes also?

Where did you add your code anyway? And how do you know it's not being overridden by one of the plug-ins?

Brandon Brigham
Brandon Brigham
3,716 Points

This is what I have for mobile CSS and that code is for making the header sticky on mobile - The header is automatically sticky on all other device screen sizes. I don't know what plugins would be over-riding this....

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

.header_top_bottom_holder {
    position: fixed;
    width: 100%;
    top: 0px;
}

}

          ```
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

This particular query only works between 320 and 480 px. But you loose your header at 1000px.

Brandon Brigham
Brandon Brigham
3,716 Points

Hmmm. Yeah I don't know what to do at this point - There has to be someway to adjust where the section scrolls down to...

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You'll need to spend some time getting familiar with what all these CSS and JavaScript plug-ins you are using actually do.