Matthew Alexandros Posts - Answer Overflow

Matthew Alexandros

•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 have a grid setup on the body of my page and define two rows. Row A is fixed at 60px and row B is set to 1ft. I also ahve the body min-height set to 100VH. This combination causes a vertical scroll bar to apear. If I change 1fr to 0.99fr it goes way, like wise if I change 100vh to 99vh it goes away. This seems like the wrong way to fix this issue so what is the right way? Code pen example (note I do use normalize) https://codepen.io/Eaglef90/pen/qBGPMpJ

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.

39 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 1/27/2024 in #ui-ux

Need ideas for news archive naivgation.

Hello all. My site has a news article section and I am struggling to figure out a good navigation for the archive. Right now what I have is that when you click the link to "News/Announcements Archive" it takes you to a man page that will load the last 5 news snippits on the mian content area and then at the bottom is a baisc calender table so you can click a link for each month of a particular year and get a page with all the snippits from the news taht month. To me this looks bland and as it sits on the bottom of the page kind of hard to find and navigate. I tried looking around for some inspiration but I guess I can't find the right search terms becasue what I usally find is not relavant or really old articles with mosly broken images. I am hoping that maybe you guys might have some good ideas or sites I can look at for some inspiration of a good system that would work in both mobile and desktop. If you want to see how it currently looks you can at https://www.ffinfo.com/news/ and if this is out of scope for this I appologize and will remove.

7 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 1/8/2024 in #front-end

Wouldn't a max-width of XXch for p tags cause lots of blank space on larger resolution?

I was watching "Under the radar CSS features for your CSS reset" video by Kevin and in it he suggests doing a max-width of 75ch on the p tag, he does say that is his suggestion and the value is up to us but I am thinking if you limit it like that then lots of dead space can start showing up on large resolutions right? And would that not got against the purpose of response design? Or am I miss-understanding something?

11 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 12/27/2023 in #front-end

How to stop sentence from breaking before certain words?

I have a set of category titles that all have the Unicode character fora down arrow at the end of the title. What I would like to do, somehow, is that as the divs that the titles are in shrink the titles are broken up from a single line to multiple lines EXCEPT for the Unicode character. I want that to always be on the same line as the last word of the title. Here is the HTML and relevant CSS:

<body>
    <header id="siteHeader">
        <nav id="siteNavigation">
            <img id="siteLogo" width="225" height="50"  />
            <div class="parentCategory">Main Series &#x25BE;</div>
            <div class="parentCategory">Compilation of FFVII &#x25BE;</div>
            <div class="parentCategory">Other Game Series &#x25BE;</div>
            <div class="parentCategory">Standalone Games &#x25BE;</div>
            <div class="parentCategory">Chocobo Games &#x25BE;</div>
            <div class="parentCategory">Media &#x25BE;</div>
            <div class="parentCategory">Collections &amp; Other Info &#x25BE; </div>
            <form id="headerSearch" action="/site-search" method="get">
                <input type="image" src="/Images/Search.svg" alt="Submit" width="24" height="24" />&nbsp;
                <input type="text"name="query" />
            </form>
        </nav>
    </header>
</body>

body{
    display: grid;
    font-family: DM Sans;
    grid-template-areas: "siteHeader siteHeader" "sectionNavigation main" "sectionNavigation footer";
    grid-template-columns: var(--sectionNavigationWidth) 1fr;
    grid-template-rows: 3.5rem 1fr;
    margin: 0 auto;
    max-width: 1920px;
    min-height: 100vh;}
#siteHeader{
    grid-area: siteHeader;
    position: sticky;
    padding: 0.1rem;
    top: 0;
    /*white-space: nowrap;*/}
#siteNavigation{display: flex;}
#sectionNavigation{
    grid-area: sectionNavigation;
    padding: 0.5rem;}
.parentCategory{
    align-self: center;
    padding-left: 1.25rem;
    text-align: center;
    text-transform: uppercase;}

<body>
    <header id="siteHeader">
        <nav id="siteNavigation">
            <img id="siteLogo" width="225" height="50"  />
            <div class="parentCategory">Main Series &#x25BE;</div>
            <div class="parentCategory">Compilation of FFVII &#x25BE;</div>
            <div class="parentCategory">Other Game Series &#x25BE;</div>
            <div class="parentCategory">Standalone Games &#x25BE;</div>
            <div class="parentCategory">Chocobo Games &#x25BE;</div>
            <div class="parentCategory">Media &#x25BE;</div>
            <div class="parentCategory">Collections &amp; Other Info &#x25BE; </div>
            <form id="headerSearch" action="/site-search" method="get">
                <input type="image" src="/Images/Search.svg" alt="Submit" width="24" height="24" />&nbsp;
                <input type="text"name="query" />
            </form>
        </nav>
    </header>
</body>

body{
    display: grid;
    font-family: DM Sans;
    grid-template-areas: "siteHeader siteHeader" "sectionNavigation main" "sectionNavigation footer";
    grid-template-columns: var(--sectionNavigationWidth) 1fr;
    grid-template-rows: 3.5rem 1fr;
    margin: 0 auto;
    max-width: 1920px;
    min-height: 100vh;}
#siteHeader{
    grid-area: siteHeader;
    position: sticky;
    padding: 0.1rem;
    top: 0;
    /*white-space: nowrap;*/}
#siteNavigation{display: flex;}
#sectionNavigation{
    grid-area: sectionNavigation;
    padding: 0.5rem;}
.parentCategory{
    align-self: center;
    padding-left: 1.25rem;
    text-align: center;
    text-transform: uppercase;}

3 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 12/19/2023 in #front-end

It is better to use FlexBox or Position for this layout?

20 replies

KPCKevin Powell - Community

•Created by Matthew Alexandros on 12/15/2023 in #front-end

Should I be setting a base font size?

Hello, I am developing my first responise website and been trying to learn as much as I can (really enjoying the videos on YT). One thing I can't really find the answer to is if I should be setting a base font-size on the html element for rem to go off of. I know the default is generally 16px so in theory I should be fine not setting a base side right? Or is it good practice to set a base size? Thanks

12 replies

Gaming

Programming