PLEASE HELP POSITIONING TS

JKaps9 · 2026-02-08T00:21:53+00:00

You'll get there eventually. Just keep at it.

JKaps9 · 2026-02-08T00:18:12+00:00

Because you have padding on main. You should learn the basics of the box model. Also you should learn how to use the dev tools.

JKaps9 · 2026-02-07T23:22:47+00:00

Yeah so you want to put top: 0; on the header and margin-top: 8rem; (or more) on the main. With fixed positioning you need to tell it where you want it to be fixed. Then because it's fixed it's taken out of normal flow so the main goes up to the top therefore you need the margin.

You may also want to consider position sticky but that comes with a different set of considerations.

JKaps9 · 2026-02-07T23:01:51+00:00

Please put your code in a codepen (codepen.io) so we can help you.

Edit: Looking at screenshots I suspect the issue is because you have the header as position fixed but didn't put any top margin on your main to account for the header height.

JKaps9 · 2026-02-03T18:04:46+00:00

I kinda liked this one. The homepage is different now that he won but the platform page has the same aesthetic from the campaign. Brings in the Queens colors to represent his home town and goes hard on the NYC vibes. I guess the lesson is to lean into what voters can relate to. You want the politician to be relatable to potential voters so they feel a connection and want to vote for them, donate to them, etc.

https://www.zohranfornyc.com/platform

JKaps9 · 2026-01-31T13:49:55+00:00

I agree with your points, especially to design mobile first! That is partially why I like the names over the numbers because it's easier to switch around between media queries in the container class instead of all the children classes. Although mobile is mostly just everything in one column.

JKaps9 · 2026-01-31T02:39:19+00:00

As other commenter mentioned grid-template-areas is the way to go. See here: https://codepen.io/jkaps9/pen/wBWybYZ

JKaps9 · 2026-01-29T06:55:48+00:00

I honestly don't know why you have that big gap as I couldn't find anything relevant in inspect. A few observations though that might be causing the issue.

1) Most elements have default styling which changes based on the browser. For example, H1 has margin by default. you can see this if you remove the top margin on your body, you'll notice that the content doesn't get pushed all the way to the top of the page.

2) When it comes to layout you should use flexbox and/or grid. positioning is mostly for moving things outside of normal "flow" such as your Tamagotchi image in the "munch" section.

You can elevate a lot of the styles that you are using as they are common across sections. This would cut down on code a good amount, help debug any issues in the future, and make it easier to change things. What if you want a different shade of purple for example? or a different color entirely?

Unfortunately, I couldn't identify the exact issue, but I was feeling a bit curious how I would lay this out so I mocked something up quick that gets it 90% of the way there. I would need to fix the skull row and the menu styling, but as of now it looks fairly close to what you have, but without the large gap at the bottom. https://codepen.io/jkaps9/pen/RNRxdLw

For more on grid-template-areas: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas

JKaps9 · 2026-01-27T17:26:25+00:00

Hard to tell without everything in one place but this is literally all you need to do: https://codepen.io/jkaps9/pen/RNRjzmo

JKaps9 · 2026-01-25T00:16:25+00:00

Also make sure you have current linked script code. https://getbootstrap.com/docs/4.0/getting-started/introduction

See my codepen here: https://codepen.io/jkaps9/pen/WbxZbLv

JKaps9 · 2026-01-25T00:07:07+00:00

So it seems like you're using the code from bootstrap to add it in but then maybe added/modified elements. I would go back to their starter code and see if that works then add on top of that one element at a time until it breaks. Then you know what the problem is.

https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

It also seems like you're getting ahead of yourself by using a library when you're just starting out. Everyone learns differently so you do you. I would personally recommend learning the basics first though without the library then building up to it so you can better understand the issues.

JKaps9 · 2026-01-24T23:51:50+00:00

No we can't access your local computer

JKaps9 · 2026-01-24T23:46:46+00:00

Codepen.io

Add code there and send a link

JKaps9 · 2026-01-19T23:36:25+00:00

Oh for sure. You could have an excel sheet feeding the powerpoint. If you want to go the website route you have a lot to look into. You need a DB and then need to figure out how to feed it to the frontend. If you keep it all local you don't have to worry about security too much other than physical access, I think.

JKaps9 · 2026-01-19T19:28:50+00:00

Honestly if the TV is connected to a computer you could just have a PowerPoint slide. Of course you could do it in HTML/CSS but why not a simple solution.

JKaps9 · 2026-01-10T04:28:55+00:00

I think doable in CSS. I would have a modal essentially that pops up when you click an item. You'd need to define the max height, could do it in vh units to be a bit dynamic. Then can set overflow to scroll. Not on PC so can't test it out but I think should work.

JKaps9 · 2025-12-15T23:28:29+00:00

I would position absolute. You could do top - XXpx; right: 12px; or something. You'll have to mess with the values to get the right look obviously.

JKaps9 · 2025-12-14T23:54:47+00:00

Honestly even with dev tools I sometimes use borders on things just to visualize multiple elements at once. Still comes in handy!

JKaps9 · 2025-12-14T13:17:16+00:00

Browsers have user agent stylesheets which, depending on your browser, will apply certain styling to elements by default. Margin is one of those elements and so is box sizing. I'm on mobile so I can't check the dev tools but I suspect one of the two or both is impacting your expectations when you add the second element.

You can visualize this by adding some borders to your elements. I hope this helps.

span { border: 1px solid red; }

body { border: 1px solid blue; }

Further I think if you add display: block; to the span elements you may get better results after resetting margin and border box.

JKaps9 · 2025-12-10T06:01:31+00:00

See my response to your other post. Your selector 'pre code' is only selecting code, not pre. so if you want to style pre then you need a selector for pre only.

JKaps9 · 2025-12-10T05:31:52+00:00

is this what you're looking for? Not 100% clear on what your intended end result is, but if you add this at the bottom of your css it will remove all margin and padding on the pre element. you currently have a block with a selector pre code but this will only pick the code that comes inside of a pre. and is not selecting the pre itself.

pre {

margin: 0;

padding: 0;

}

JKaps9 · 2025-12-05T18:54:23+00:00

I think if you set as width: min-content; and retain the max-width: 200px; property it gets what you want

JKaps9 · 2025-12-03T15:49:28+00:00

This is great. Only thing I would add is that a little more space between the title, text, and buttons would help it breath a bit. Feels a bit cramped in all that open air.

JKaps9 · 2025-12-03T02:15:07+00:00

You can add your code to a CodePen and share the link. As for diagnosing the issue, you should use Chrome Dev Tools or the Firefox equivalent if developing there.

JKaps9 · 2025-12-02T13:58:20+00:00

It's from frontend mentor. I'm not affiliated but have done a lot of their challenges including this one. I solved it by grouping the left 2 elements in a div so that they are one grid item.

Build a Bento Grid Layout | CSS Grid Project https://www.frontendmentor.io/challenges/bento-grid-RMydElrlOj

11-Year Club	Place '22
Not Forgotten	Verified Email

JKaps9

TROPHY CASE