Well, the example I created for you does exactly what you asked. To help you out, I’ve entered your content exactly. Have you tried narrowing the screen or activating the mobile view to see how the positioning behaves?
1 Like
Okay, it was a bit confusing on my tiny notebook and codepen, but when I adjusted the browser window size I see that it adapts/ And now I see you were nice enough to provide another sample above.
I looked at your code but am not following how it works…
P.S. Very nice image! Where did you get that?
You have to think in mobile first method. Then, simply, in HTML enter the description and then the picture.
From the HTML code you can see that I have enclosed product_desc and product_image inside product. I did this because when the screen gets bigger, for example over 768px, the CSS code intervenes with the flexboxes.
The key is:
.product { display: flex; flex: 0 1 car; }
From W3
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
The order property is linked to the flexboxes and allows you to order items as you like.
From W3
Order: Specifies the order of a flexible item relative to the rest of the flex items inside the same container.
So in your example, the HTML has the description first and then the image second, and it just straight up displays like that? And that is for mobile first?
But then when your screen gets wider than 768px, a media query (?) kicks in using a flexbox where the image is defined to show first (left)?
Yeah.
But I suggest you study flexbox and grid layout, and the Mobile First method.
1 Like
Yes, I would like to learn that, but am trying to get my current website done first.
In your example, why didn’t you use flexbox for everything?
Couldn’t you use flexbox for mobile first and desktop second?
You can use the flexboxes as you like and wherever you want. But you need to be careful, because flexbox require a little effort for browsers. The solution I wrote you is understandable, fast and mobile first.
What I was asking is if it would make more sense to also use flexbox for desktop?
Couldn’t you have one flexbox style for mobile first, and another flexbox style for desktop second?
Or do you only need flexbox for deskptop?
You can use the flexbox in both mobile and desktop. But why add more code if you can get the same result with fewer lines of code? Of course if you write your code in Desktop First, you can only use flexboxes for mobile. But it’s an ancient way of writing code.
1 Like
Because I thought people say on here that flexbox is better for layout in general, so I thought it might be good to use flexbox for laying out both mobile and desktop? I don’t know, just asking.
With CSS we are free to do what we want.
However, in general it is suggested to use the grid layout to layout a page, and to use the flexbox to organize the contents.
1 Like
Okay, thanks for the help!
Looks good! That is what I would say I wanted.
Questions:
1.) Why did you put Unisex and the Price in the H2?
2.) Why did you take the approach you did versus how DavideMancuso did?
I tried reading your CSS, but honestly got lost in the meaning. Am trying to brush up on Flexbox but there is a lot to learn!
P.S. Love those slippers!!! 
- They appeared, to me anyway, to be a part of the heading.
But they are not fixed in stone and may be moved out.
HTML
<h2>Fuzzy Pink Slippers</h2>
<span>Unisex</span>
<span>$19.95</span>
CSS
.item h2 {
margin: 0;
}
.item span {
display: block;
}
- @DavideMancuso’s approach is from mobile to desktop,
whereas mine is from desktop to mobile.
1 Like
Okay.
Okay.
Thanks.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.