Naa Comments - Answer Overflow

Naa

Posts Comments

KPCKevin Powell - Community

•Created by Segun on 9/26/2023 in #front-end

Is this possible?

no worries at all :) glad to be able to help

16 replies

KPCKevin Powell - Community

•Created by Segun on 9/26/2023 in #front-end

Is this possible?

actually i think that link is still to the older version? but yeah probably still the img element

16 replies

KPCKevin Powell - Community

•Created by Segun on 9/26/2023 in #front-end

Is this possible?

You didn't update the img css

16 replies

KPCKevin Powell - Community

•Created by Segun on 9/26/2023 in #front-end

Is this possible?

They are when I change these in your codepen example

16 replies

KPCKevin Powell - Community

•Created by Segun on 9/26/2023 in #front-end

Is this possible?

If I'm understanding your problem correctly, remove aspect-ratio from both of your article elements, and set

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

16 replies

KPCKevin Powell - Community

•Created by w3dd1e on 9/1/2023 in #front-end

Getting Started on a Sass project.

I would start by writing a little of the bones (html) of the project, if you haven't already. Then I usually make a main.scss file where I put in some basic structure stuff, how I want the body to be structured, base font-size, etc. I usually create another file called _resets.scss importing it into main.scss which does things like:

*, *:before, *:after {
 box-sizing: border-box;
padding: 0;
margin: 0;
}

*, *:before, *:after {
 box-sizing: border-box;
padding: 0;
margin: 0;
}

Then anything that can be split off and reused go into a new file, and imported into main.scss. But really it's an evolution. Things might start in main, then i realise it's better off in it's own file. Fun variables to start with are colour, imo. Decide on a primary and secondary colour (or however many you want) and you can use sass variables to store them and reuse them throughout your project. Then if you want to change your whole primary colour, you only have to change it in one place. It can get quite granular, but it definitely doesn't have to start that way. Just start playing (there's nothing so paralysing as a new, blank file ime), make things up on the fly. If you have a lot of input styling, throw that in it's own file, and if you want them to all look the same, make their background colours, border styling, padding etc variables that all inputs use, or use parts of. Mixins and functions can come later, you'll get curious and want to try them out.

4 replies

KPCKevin Powell - Community

•Created by TedS on 8/30/2023 in #front-end

Site Rendered Oddly on Chrome Mobile

You can override some of the styling, like you already have:

select { 
  border-radius: 0;
  background: white;
  border: 1px solid gray;
}

6 replies

KPCKevin Powell - Community

•Created by TedS on 8/30/2023 in #front-end

Site Rendered Oddly on Chrome Mobile

6 replies

KPCKevin Powell - Community

•Created by TedS on 8/30/2023 in #front-end

Site Rendered Oddly on Chrome Mobile

I think it's just the native styling of the select element, every browser does it a little different. This is your site in Firefox 116.0.3 on windows

6 replies

KPCKevin Powell - Community

•Created by snxxwyy on 8/31/2023 in #front-end

Stacking/z-index issue

Hi snxxwyy, is it just the overlay of those pics you're struggling with? if you put right: 0 on .hero__background-image to stretch the container over the whole screen, then width: 100% on the img element, that gets the layering of these two images to match the design, except it's showing more of the entire image than the design. But I feel like I'm missing part of the problem?

3 replies

KPCKevin Powell - Community

•Created by Spencer on 8/31/2023 in #front-end

How do I get all my border radius' the same size?

You need to set the .g1 elements to the same height and width to make them squares, then set them all to radius: 50%, that will make them all circles. The display grid, and justify/align is to center the contents within the circles.

.g1 {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.g1 {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Then set width: unset on #zero as I see you want that to span multiple columns. I would also then remove the height property (height: 650px) from #calcInterface to allow all the elements to fit.

3 replies

KPCKevin Powell - Community

•Created by ErickO on 3/29/2023 in #resources

Accessibility (a11y) Resources

Awesome list, thank you! Thought I'd add this great video I stumbled onto the other day, showing what it's like using a screen reader on websites https://youtu.be/OUDV1gqs9GA

12 replies

KPCKevin Powell - Community

•Created by Pat66 on 3/7/2023 in #front-end

Background in page

You're trying to put a portrait oriented image (taller than it is wide) in a section that is landscape oriented (wider than it is tall). If you want it to fill the full width of the section, it's going to have to essentially zoom in on the image so the width of the image is the same as the whole page, making the whole image larger, and therefore cutting off a lot of the height. If you want to see the image completely, there is going to be white space on the side(s). You could choose to background: url() top/cover so that the crop would at least include the top of the image, instead of the center.

14 replies

KPCKevin Powell - Community

•Created by websmith on 3/8/2023 in #front-end

Best approach to add an SVG image positioned bottom of a ClipPath.

No worries :) hope it helps.

6 replies

KPCKevin Powell - Community

•Created by websmith on 3/8/2023 in #front-end

Best approach to add an SVG image positioned bottom of a ClipPath.

I believe this was the video https://www.youtube.com/watch?v=hWGgw1K-i8Y

6 replies

KPCKevin Powell - Community

•Created by websmith on 3/8/2023 in #front-end

Best approach to add an SVG image positioned bottom of a ClipPath.

Hi Ben, following a video of Kevin's, using this image as a mask-image on a before/after pseudo element seems a way to go. Something like:

header {
  position: relative; 
}
header::after {
  position: absolute;
  content: '';
  width: 100%;
  background: black; // whatever colour you want the line to be
  mask-image: url('../path/to/line-path.svg');
  height: 2rem; // whatever height works at different media sizes;
  bottom: 0;
}

header {
  position: relative; 
}
header::after {
  position: absolute;
  content: '';
  width: 100%;
  background: black; // whatever colour you want the line to be
  mask-image: url('../path/to/line-path.svg');
  height: 2rem; // whatever height works at different media sizes;
  bottom: 0;
}

6 replies

Gaming

Programming