Chris Bolson Comments - Answer Overflow

Chris Bolson

•Created by roycube. on 12/15/2024 in #front-end

Grid that is max 4 cola but can expand

I suspect that you will either need to use flex or, if that isn't an option, you will need to use JS to get the width of each element before applying the number of columns that it needs to span.

3 replies

KPCKevin Powell - Community

•Created by Mathies on 12/13/2024 in #front-end

How to optimize mediocre page speed results with Canvas element and Fontawesome.

Admittedly that is a bit strange. It might be due to the canvas being loaded behind it more than the text itself. I would test the site without the canvas element to see if that makes a difference.

20 replies

KPCKevin Powell - Community

•Created by Mathies on 12/13/2024 in #front-end

How to optimize mediocre page speed results with Canvas element and Fontawesome.

The pagespeed page gives pretty good advice. Just work through them one by one, following the recommendations. You should be able to improve the values and at the same time will learn some new tricks 😉

20 replies

KPCKevin Powell - Community

•Created by Mathies on 12/13/2024 in #front-end

How to optimize mediocre page speed results with Canvas element and Fontawesome.

It really is just a question of going through the pagespeed results and resolving the issues one by one. You can either go through them in order or start with the ones that affect the loading time the most. For example "Defer offscreen images Potential savings of 580 KiB " That is quite a lot but has an easy fix. Just add loading="lazy"to any of the images below the fold, ie images that are not visible on page load before scrolling. Another example is that you are loading a lot of external CSS (and JS) files? do you really need all of them? Any that you really do need, add a preload headers so that the browser gets ready for them <link rel="preload" as="style" href="style.css"> More info You mention your canvas animation. I would question whether delaying the load is actually a good idea as that is one of the first thing that the browser wants to show and is having to wait. You almost want to do the opposite. However I would also question if you really need it. It is hardly visible on your site and I don't think that not having it would make any difference.

20 replies

KPCKevin Powell - Community

•Created by snxxwyy on 12/10/2024 in #front-end

:has() alternatives

Opera mini doesn’t even support grid 😄

20 replies

KPCKevin Powell - Community

•Created by ArZee on 12/5/2024 in #front-end

Responsive Hero Section

If you want the image to overlap (I presume you want it behind the text), I would use position:absolute rather than setting flex on the container. That way you could also easily ensure that it is at the bottom at all times. ~~Then, on smaller viewports you could revert to it having a static position so that it flows below the text~~ Sorry, I miss-read that part. On smaller screens you want it to overflow (I was miss-lead by your images which contradict what you are saying)

2 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 12/4/2024 in #front-end

Is my figma file glitched? If I copy styles from figma , it doesn't match in the browser.

If you share your code on Codepen or similar somebody might be able to help you. Otherwise it is just guess work (it looks like there is no styling other than the font family and size).

4 replies

KPCKevin Powell - Community

•Created by CZghost on 11/29/2024 in #front-end

Navigation menu has been broken

Personally I wouldn't even give those links a class name. I would select them from the parent ul element .menu-main > li > a{} but that is a different matter and I know others would disagree. 😆

16 replies

KPCKevin Powell - Community

•Created by CZghost on 11/29/2024 in #front-end

Navigation menu has been broken

note, you don't actually need to prepend the "a", I just add that for clarity to help you see the issue. However it does increase specificity so no other elements with that class name (should they exist) will get the styles

16 replies

KPCKevin Powell - Community

•Created by CZghost on 11/29/2024 in #front-end

Navigation menu has been broken

Your selectors are wrong. For example your HTML is this:

<li><a href="/en/about" class="menu-main--item">About</a></li>

<li><a href="/en/about" class="menu-main--item">About</a></li>

But your CSS is this:

.menu-main--item a{
  ...styles
}

.menu-main--item a{
  ...styles
}

That should be :

a.menu-main--item{
  ...styles
}

a.menu-main--item{
  ...styles
}

16 replies

KPCKevin Powell - Community

•Created by AsmKhalid on 11/29/2024 in #front-end

Faced a little problem following a tutorial

Have youy used the inspector tool to see if any other styles are being applied. It makes sense that they are being displayed in a column but I can't see why each li wouldn't expand across the whole width.

7 replies

KPCKevin Powell - Community

•Created by AsmKhalid on 11/29/2024 in #front-end

Faced a little problem following a tutorial

Do the 3 items in the popularArticles element have any of their own styles/classes?

7 replies

KPCKevin Powell - Community

•Created by AsmKhalid on 11/29/2024 in #front-end

Faced a little problem following a tutorial

I can't quite work out what you are doing from the screen shots. Are you trying to get the "PopuluarArticles" to span the 3 columns of the parent? If so, I think that you will need to create a "span-3" class similar to your "span-2" class and apply that to this element to tell it to span the full width of the parent other wise it will just fill one "cell" of the grid and have to squash all it's content into the available space.

7 replies

Gaming

Programming