Chris Bolson Comments - Answer Overflow

Chris Bolson

•Created by Rebeca on 2/14/2025 in #front-end

Slider activation causing sudden vertical scroll

Just to clarify, by saying "#target" I was really referring to any href with a "#" link (in this case #slide-1 and #slide-2) - sorry for any confusion

9 replies

KPCKevin Powell - Community

•Created by Rebeca on 2/14/2025 in #front-end

Slider activation causing sudden vertical scroll

But you are right in that the "targeted" element can be selected using the :target selector, however bear in mind that that will then set the property for all of the "targets" on the page, not just the images in question which might not be what you want. This can of course be refined to only select the images.

9 replies

KPCKevin Powell - Community

•Created by Rebeca on 2/14/2025 in #front-end

Slider activation causing sudden vertical scroll

no, I did mean #target. The code is sliding the images using href #slide-1 and #slide-2

9 replies

KPCKevin Powell - Community

•Created by Rebeca on 2/14/2025 in #front-end

Slider activation causing sudden vertical scroll

#target will automatically scroll (or jump) the browser to the top of the target element. You can offset this with scroll-padding-top . As Epic says, without seeing some working code it is difficult to know what is actually happening.

9 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

You can use gap on the parent or add some margin

20 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

They do on your CodePen. By the way, you should convert your second "default" value into rem so that the user can scale/zoom it just like the rest of the code. There are mathematical calculations that you can (should) make to work this out but I must admit that, at least in my demos where I use clamp(), I tend to just add a small amount in rem, eg:

font-size: clamp(0.9rem, 2.7vw + .05rem, 1.6rem);

font-size: clamp(0.9rem, 2.7vw + .05rem, 1.6rem);

20 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

just reduce the max value in the clamp()

20 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

You have your sections (before and after) set to 50vh so the first one is pushing the video section down so that it starts at the mid way point of the viewport. If you reduce your section heights this will move up. However if this is a stand-alone page with no content before or after the video section and you want this section to be in the vertical center of the viewport there are better ways to achieve this (eg. flex or grid)

20 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

The button is also a bit strange. I think that you have over complicated it with having dynamic width and height. You could maintain it's design by just using some padding . By using em it will always be relative to the button font size, eg. :

 /*    
  width: clamp(130px, 11vw, 260px);
    height: clamp(30px, 5vh, 80px);
  */
   padding: .5em 1em;

 /*    
  width: clamp(130px, 11vw, 260px);
    height: clamp(30px, 5vh, 80px);
  */
   padding: .5em 1em;

20 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

So what is it that you don't like about it? I do find it strange that the video section is two thirds of the way down the page which is strange though presumably it would have content above it ? One thing that I would probably change is the max width of your Lorem-Text element. On larger viewports it extends onto one line and is rather long. I would suggest limiting the width and defining some balance

.Lorem-Text {
    ...
    max-width:50ch; /* eg max character width */
    text-wrap: balance;
}

.Lorem-Text {
    ...
    max-width:50ch; /* eg max character width */
    text-wrap: balance;
}

20 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 2/14/2025 in #front-end

Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:

All I can see is a white stripe towards the bottom of the viewport on a pale green background. I feel that you need to be more specific with your questions and actually have some content to better understand what you need help with.

20 replies

KPCKevin Powell - Community

•Created by Abdul Ahad⚡ on 2/14/2025 in #front-end

How do I approach this circle micro interaction

If it is an SVG you could animate the border by modifying the stroke-dasharray and stroke-dashoffset. Alternatively, if it is a normal button border you could look at using a conic-gradient border and animating the angle of the gradient.

3 replies

KPCKevin Powell - Community

•Created by oemer on 2/13/2025 in #front-end

How to do a dashed border with a gradient and a border-radius in css?

One method is to place the "border" gradient on a pseudo element and use a mask to only allow the edges to be visible, leaving the content area transparent.

44 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

ah..... you where just missing the unit (s) on the duration for the opacity 🤦‍♂️ Easily done!

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

I have just created a completely new test and in this case the --wiggle (linear()) did work when defining it within the short-hand so I don't know what went wrong before.... I am going to try again with your code to see what I missed

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

As you haven't provided it, I have created a quick class to add scale on hover to be able to test it:

.project-container:hover{
    transform: scale(2);
    opacity: 1;
}

.project-container:hover{
    transform: scale(2);
    opacity: 1;
}

And you are right, the transition timing function doesn't work, at least not as you have defined it. However it you break it up into individual transition declarations like this, it does work:

transition-property: transform, opacity;
transition-duration: 3s, 0.3s;
transition-timing-function: var(--wiggle), linear;

transition-property: transform, opacity;
transition-duration: 3s, 0.3s;
transition-timing-function: var(--wiggle), linear;

It is interesting that linear() doesn't work when using the shorthand when the shortand has more than one transition property defined. 🤔

23 replies

Gaming

Programming