Hello. I have a question about my options making something responsive.
Below is a mockup of an item in an e-commerce site…
With a responsive design, as you make the browser window smaller, I believe what normally happens is that the product description text on the right would drop down below the product image, right?
What I want to know is there a way to make it so the product description would shift to the left, and the product image would drop down?
To me, if you were on mobile, it might be better to see the product description before seeing the product image, yet on a regular computer, I like having the image on the left and the description on the right.
So is this possible with HTML/CSS?
And secondly, is my thinking right or wrong about which order you should see things on mobile?
Hi, of course it’s possible. Here’s the solution:
HTML
<div class="product">
<div class="product_desc">
Your description
</div>
<div class="product_image">
Your image
</div>
</div>
CSS
@media only screen and (min-width: 768px) {
.product { display: flex; }
.product_image { order: 0; }
.product_desc { order: 1; }
}
You can order content via HTML exactly the way you want it for the mobile version.
On the bigger screens, with flexboxes you can use the order property to order your content the way you like it.
2 Likes
Thanks for the code - I was just curious if what i wanted could be done.
Not sure I follow the code…
It appears that the image would come first, and the description second, since 0 comes before 1?
I’ve prepared an example for you: https://codepen.io/davidemancuso/pen/eYpwVZv
You can order the content as you like, according to your needs. There is no rule about what is the best decision. But I like to remember that a picture is worth a thousand words.
2 Likes
Thanks for the dynamic sample.
I see how changing the numbers changes the order, but I don’t see how that applies to my situation.
For desktop, I want things to look like the example in my OP. But for mobile, I am thinking it is better to start off with the description 1st, and then have the picture 2nd.
So how would i do that?
I’m sorry, but at this point I need to better understand your request.
What you want is the following situation:
Mobile
First - Top: Description
Second - Bottom: Image
Desktop
Left: Image
Right: Description
Is that correct?
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.
For example picture I used https://picsum.photos
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
