Linear gradient

[OBXjuggler]

Hello,

having trouble using

linear gradient

please see

https://forallthetime.com/landing/index.html

you will see there are 3 sections

how do i make 1 section? top to bottom?

kindly provide the proper code and a comment explaining what you did for me

thanks!

[sibertius]

@OBXjuggler

how do i make 1 section? top to bottom?

Add height: 100vh; to the body?

[PaulOB]

@sibertius

Add height: 100vh; to the body?

You can’t do that because that will stop the body at the bottom of the viewport.

You could use min-height:instead but then you end up stretching the gradient on a long document.

My preferred approach is to make the gradient fit the viewport like this.

body {
  background: black;
}
body:before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(180deg, black, grey);
}

In that way it won’t get stretched on long documents.

[OBXjuggler]

it works!

looks good

do I owe you a $0.25 now?

you know what my problem was NOT…

a fixed height in a containing element

[OBXjuggler]

please see

https://forallthetime.com/landing/index.html

help here, please

i have 3 images in a row

how do i add text to the bottom of each image WITHOUT over flowing to the next image’s bottom

or, say text conatined to that images width

am i clear?

kindly pass on the proper code

i will learn something new here!!

thank you

[ralphm]

You could put display: flex; on .parent and remove it from .item:

.parent {
  display: flex;
  gap: 20px;
}

.parent div {
  width: min-content;
}

Still, this leaves a lot to be desired, so not an ideal solution. The ideal would be to rethink the whole page layout.

[PaulOB]

@OBXjuggler

i have 3 images in a row

You seem to have removed the styles now

I would look at something like this for starters.

Try not to add empty divs when there is no reason as that means you lose grid-items and flex-items as the children become nested. Unless of course you have alternate reasons for the extra divs.

[OBXjuggler]

thanks to you both!

Paul, i made a mistake

this site is not responsive

maybe it did not occur to me to check beore i made my code

can this be fixed with a media query?

i tried different ideas on my own, no go

large screen a row, a small screen a column

seriously, i really appreciate it if you can help me here

maybe add the code to the codepen above?

my code looks wonky on my iphone, can we fix that?

thank you!

[PaulOB]

@OBXjuggler

this site is not responsive

I gave you a responsive version here.

It’s mostly your html but new css.

[ralphm]

That responsive version could even be done (to some extent) without the media query, by changing this:

grid-template-columns: 1fr 1fr 1fr;

to something like this:

grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));

(I’ve been researching ways to avoid using media queries — just for fun, basically.)

[OBXjuggler]

most appreciated!!

thanks for your time and trouble… looks great!

and thank you for the actual code

question…

what does

.wrap {
margin: 1rem auto;

do for me?

and

.item img {
aspect-ratio: 1/1;

to be even more informed, what does auto generly do?

[ralphm]

.wrap {
margin: 1rem auto;
}

This centers the .wrap item horizontally (left and right), and places 1rem of margin top and bottom. (On a large screen, your .wrap div sits in the middle of the screen because of the auto in margin: 0 auto;.)

The meaning of auto varies a lot depending on when and where it’s used. When used for left and right margin, it means put half of the empty space on the left and half on the right, thus centering the element within its container.

aspect-ratio is a new CSS property that preserves the dimensions of an element. 1/1 means that the element is forced to remain a square shape, as the horizontal and vertical dimensions have a 1:1 ratio.

[PaulOB]

@ralphm

When used for left and right margin, it means put half of the empty space on the left and half on the right, thus centering the element within its container.

To clarify a little ‘auto’ means takes up as much space as is available on that side. If you just had a margin-left:auto then the element would be pushed all the way over to the right (assuming the element was not full-width to start with). When you have left and right as auto then they both try to take up as much space as possible which ends up centering the element as they both can only have half the available space.

‘auto’ also works for vertical margins when used inside flex box and grid contexts (and absolute positioned contexts) because the height of the element will be known. auto does not work for vertical margins on static elements because there is no basis for a height context to be determined (unlike viewport width).

[PaulOB]

quote=“ralphm, post:10, topic:415607”]
(I’ve been researching ways to avoid using media queries — just for fun, basically.)
[/quote]

Yes minmax is good for fluid layouts and allows for wrapping as required (there used to be a bug in ios that stopped min-widths from working in that context but seems to be fixed now).

In the end it depends on the layout. If you only have three images for example (or rows of three) then you may not want this to happen on smaller screens.

But with media queries you can force the issue and do this instead.

It’s horses for courses so there is no right or wrong way as such but whatever the current design requires.