Matthew Alexandros Comments - Answer Overflow

Topics

Matthew Alexandros

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

I was actually tryign to find that to rewatch it when you did suggest the wrapper div I remember wathcing it a while ago. My Guide is about to run events so I have to take a little break from working on this but I will play with the wrapper idea as well as give that video another watch afteword and if still ahve questions I will come back. Apreacite the help

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

Would you agree it sounds like header should not be part of the grid? Sticky header then grid for 3 column with footer under mid column?

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

There are two differnt navs. The head will contain the site navigation and the left column sub section navigations. The more I think on it the more the header seems like it should not be part of the grid.

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

The intenti s a full width header with logo, nav, search bar, etc in it that is sticky to the top. Taking it out of the grid seems right and would also probibily get rid of this whole problem?

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

Watching this and looking at code I am wondering, should my header even be part of the grid?

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

I did know about the stick to one main thing, and thanks for the compiled html. Your example is more easy to read now. STuill going though it and wathcing the last video you linked.

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

So that is basicly using the main as a wrapper like you said to add eailer?

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

I am not famiare with codepen and am trying to figure out your example. There is not normal HTML markup. You ahve main.grid I know .grid is the CSS class but is main = body?

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

Jsut started to watch the video you linked. He talks about s/d/l vh all not supported by FireFox so I can't use that as a solution. I am also confised by your "then use it" comment. Your not says if I use stick I am getting "footguns" (I presume you mean I am going to shoot my self in the foot).

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

I want the entire header to be sticky on the top of the page.

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

Your code pen notes a "fooguns if using sticky", do plan on having the header sticky

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

Looks like I can't use lvbh or svh, not supported at all by FireFox.

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 6/11/2024 in #front-end

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

I had already tried removing normalize and it acutally makes things much worse and causes a full scroll action

62 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

The pages using that table would be large. I am trying to design a release information page . The goal is to have the name, logo, information about that particular release (like different editons and what was included in them as well as changes done if it was a remake or something), and a table containing things like release date platform locations publisher developer and much more. The current data is just kind of a place holder while i make the layout but even a full table would not make it much wider

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

Thanks. The images have a fix max width. As I was going though this thread I was starting to think in my head this might be a bad design. I am on mobile at work so can't say for sure but it kind of looks like it feom the small pic I can see on my home. I really appreciate all the help though!

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

I forgot up to set the original pen to ahve alonger text and table. I updated the pen. The goal is to have the existing layout but have the table sit next to the image instead of hugging the right side of the page

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

No description

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

https://codepen.io/Eaglef90/pen/XWQPXOe

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

The whole thing sits under a

<main></main>

<main></main>

where all my main content goes.

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 4/9/2024 in #front-end

Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.

<section class="clearFloat">
    <h2 class="centerText">Final Fantasy VII Remake Board Game: Materia Hunter</h2>
    <div>
        <div class="floatRight">
                    <table>
                            <tr>
                                        <td><p>Release Date</p></td>
                                        <td><p>March 2024</p></td>
                            </tr>
                            <tr>
                                        <td><p>Platorm</p></td>
                                        <td><p>Tabletop Board Game</p></td>
                            </tr>
                    </table>
        </div>

        <picture>
            <source media="(min-width: 1024px)" srcset="/media/sgjgw2de/1__40578.jpg?rmode=max&amp;width=423&amp;height=238&amp;v=1da6af48b2c9450">
            <source media="(max-width: 1023px)" srcset="/media/sgjgw2de/1__40578.jpg?rmode=max&amp;width=200&amp;height=120&amp;v=1da6af48b2c9450">
            <img src="" alt="Final Fantasy VII Remake Board Game: Materia Hunter Logo" decoding="async" />
        </picture>

            <p>This is a competitive board game for 2 or 4 players in a 1v1 or 2v2 setup. The goal is to collect he most materia using the abilities of the icon characters from the Final Fantasy VII Remake game. The game includes 20 character card,s 80 materia cards (there are 5 different types of materia to use), 20 medal tokens, and 5 materia titles. It is estimated to take about 30 minutes to play</p>
    </div>
</section>

<section class="clearFloat">
    <h2 class="centerText">Final Fantasy VII Remake Board Game: Materia Hunter</h2>
    <div>
        <div class="floatRight">
                    <table>
                            <tr>
                                        <td><p>Release Date</p></td>
                                        <td><p>March 2024</p></td>
                            </tr>
                            <tr>
                                        <td><p>Platorm</p></td>
                                        <td><p>Tabletop Board Game</p></td>
                            </tr>
                    </table>
        </div>

        <picture>
            <source media="(min-width: 1024px)" srcset="/media/sgjgw2de/1__40578.jpg?rmode=max&amp;width=423&amp;height=238&amp;v=1da6af48b2c9450">
            <source media="(max-width: 1023px)" srcset="/media/sgjgw2de/1__40578.jpg?rmode=max&amp;width=200&amp;height=120&amp;v=1da6af48b2c9450">
            <img src="" alt="Final Fantasy VII Remake Board Game: Materia Hunter Logo" decoding="async" />
        </picture>

            <p>This is a competitive board game for 2 or 4 players in a 1v1 or 2v2 setup. The goal is to collect he most materia using the abilities of the icon characters from the Final Fantasy VII Remake game. The game includes 20 character card,s 80 materia cards (there are 5 different types of materia to use), 20 medal tokens, and 5 materia titles. It is estimated to take about 30 minutes to play</p>
    </div>
</section>

This is the code set. Nothing special the the CSS, floatRight is

float: right

float: right

and clearFloat is a

clear: both

clear: both

39 replies