image question
Im busy with another FEM Challenge.
Now on mobile the image has to take the whole width
But on desktop it has a fixed max width
Can I do something like this :
or do I have to use media queries to make this work ?
76 Replies
this would work, but I'm not sure it would do what you want
this rule would make all images full width or 1200px whichever is smaller
so if the parent element is 800px, the image will be 800px, but if it's 1500px the image will be 1200px
oke, then back to the books
what do you want to achieve exactly? 'cause this rule might be what you are after, it's just not clear from your question
I will copy the pictures im giving with the challenge
it has to look this way on mobile ;
and like this on desktop :
looks like the image always fills it's parent container's width, so I would have
width: 100% on the image and the max-width on the parent.for me not
on the desktop the top image has some sort of padding and on mobile not
padding almost never goes on images themselves, but on their parent container. and if you look at the text on the desktop version it has the same padding as the image. which hints at them being in the same container
if I had to make this layout I would have something like :
so on desktop the padding goes on the
<article> and on mobile it would go on each <section>
(could also always put it on the <article> and cancel it on the image with a negative margin on mobile... but I don't like negative margins)I have done it like this :
then you don't really have a choice but to use negative margins
could also do fancy stuff with grid... but that's overkill and kinda stupid)
yep, this one looks more like a flex one then a grid one
you can only have one
<main> per document, so this markup would not work if you have more than one recipes on the page.
nah, you don't need a flex either, all your element's are blocks, they will stack without any need for a layout tool like grid or flexThis challenge has only 1 recipe
I do also think you do not need flex
but if I understand you right , I need to use a media query here
or a container query if there's other stuff no the page that could influence the available space (like if you have a nav bar on the left or a table of content on the right for example)
nope , in this case nothing else then shown on the pictures
and I have to learn then container queries
and maybe im going to use your markup
I like the idea of using semantic html
@Rägnar you mean something like this :
`
that's... a lot of code...
codepen ?
quote no adapted to this use, just use a section
and you might want to use a a
<dl> instead if a <ul>
and the nutrition section should be a table
the ol is fine, I thinkoke, so the
<quote> can also be a <section>
I have to look what is the difference between a dl and a ul
The rest I can changeI linked you the mdn page just above
where do I have to change this:
?
for the prep times
usually if you have a list of "something: something else" you want a DL
oke
So you mean I can do something like this :
?
the
: should be in the <dt> or a pseudo elementoke
I did this way because the text should be bold but the : not
have to think how to do that
What do you mean with a pseudo element ?
:before or so ?You can just have two span in dt
Put bold style on first span and nothing on other.
Or just have one span and remove the bold style from it
oke
So like this :
?
that would work too, but in this case the
: is presentationnal, it doesn't add anything that the markup doesn't already convey. so you can use a dt::after {content: ':'} and if you wantOh right with span the screen reader will probably pick up the colon
but is the colon very important to hear ?
no, it's implied by the DT
oke, and then set the font-weight to a non-bold property ?
yeah
Could work
I have to try
@Rägnar I have made it a dl
But the first is not bold what I expect and the text is on the next line
Do I have to make that good with css
https://codepen.io/RoelofWobben/pen/ByNXedq
??
dt is not automatically bold if that is what you are asking
oke
For the examples I thought it would be
were you looking at mdn example?
I think that has some font or styles applied
I thought I did
yes this has some font set
and font style oblique
oke
I tried this :
but as soon as I do the
font-x I loose the :font-x or just font family
remove font family and see what happens
The same
when I do this:
if I only do the content everything looks fine
except the : is also bold what is not what is needed
works for me
you forgot a semi colon after content
unlike javascript css will not tolerate missing semi colons
chips, that was it
after dinner I have to look why the text is on two lines instead of 1
dd is block level I think
so should be dt
what doesn't look like it
it is a block element
I see clearly that the text is on two lines
then what is the reason
dt is block level so it spans the whole width
dd is too and does the same
what if they were inline what do you think will happen
oke
then I have to set a width or use flex to display them next to each other
flex is probably better
oke, then I have to figure out where flex schould be working
oke
this seems to work
`
so wrap it in a div and that is doing the trick
chips. with that I cannot make it work that all items seems to need different gaps
sorry not needed if I look at the template
but I still think it s looking better that the text after the : are on the same place
is there a better way then wrapping everything in a div ?
I think you need to elaborate
I don't know what you're trying to do right now
I might not answer till much later need to go to bed
What I want is that the td and dd are on one row
You could do something like this:
@Chris thanks
Looks perfect :
https://codepen.io/RoelofWobben/pen/ByNXedq
not complete perfect
There is now a gap between the two and that is not needed
A little off topic, but how much effort / time are you putting in before asking a question? It's fine to ask as many questions as you need but it can get to the point where you aren't learning much
For my idea i do a lot of google and trying
Even after asking im still trying things and use google
hmm, I can do this:
but then still I have this :
Instead of
` So still some work to do @vince do you have a hint ?
` So still some work to do @vince do you have a hint ?
I'm not sure either but in situations like this I try to make the problem as simple as possible by reducing the complexity
So make a separate codepen or file that only has the issue you have and try to experiment with different styles or elements
I did already
and at this moment, out of ideas
Tried padding and margin on the dt and on the dd but no luck
oke, it seems that wrapping in a div is the best solution I can find
PIty that I do not know a better way
Sorry, my mistake. I assumed that you were referring to the bottom Nutrition data.
I honestly think that you have overcomplicated this for yourself by making the preparation time a <dl>. Sticking with a <ul> would have been so much simpler.
I can see why it makes sense for the nutrition list but not for this one.
@Chris Bolson I understand your point but another person ( Ragnar) said I had to be a
<dl>I am not sure why they suggested that as it really is just a bullet list of points.
I am not saying that Ragnar is wrong, no doubt they know more about this than me, but sometimes you need to use the best tool for the job.
In terms of following the design, if you use <dl> for this you are creating more work for yourself (and the browser) as you need to add things in that would already be there if you used <ul> eg:
- Make the items inline in groups of 2
- Add the bullet points
@Rägnar what do you think about this ?
@Rägnar happy ?
https://codepen.io/RoelofWobben/pen/ByNXedq
you have a lost
> before the image and a lost closing </p> tag and you have 2 unclosed <section> tags (line 2 and 7)you could simplify the CSS without having to use absolute positioning on the bullets if you added them as pseudo elements on the wrapper rather than on the dt, something like this:
oke, I changed everything and hope everything is well