How to create a responsive layout?

Design & UX
1

Hi,

How do I create a responsive UI like the attached pic ? Any help is appreciated

1024Ă—768 165 KB
.

Thanks.

2

That pic isn’t responsive. :stuck_out_tongue: (They never are, of course.) So when someone asks me how to make an image responsive, I ask for more info, like how those elements are meant to respond.

Also, please have a go yourself, at least posting your starting code. You need to do some work yourself. :slight_smile:

1 Like
3

Hi,

I don’t understand what u mean that pic isn’t responsive. I am trying to create that layout using bootstrap grid thing. But in bs3 they have so many col types which i can use to define the grid cols. but i don’t understand which to use where. If the grid cols. are responsive and will adapt according to device then why i have to specify xs, sm etc. ? Why not just specify one type and it should adjust according to the device ?

Oh and my template is just a simple webshop type template. Top left is logo, right is responsive mega menu which should shrink when someone views on mobile etc. And then rotator or carousel on the right side, left col will showcase some special products one below another or anything else like a image banner etc.

Then 4 cols below rotator/carousel to display 4 products and then a standard footer row to display footer links/copyright message etc.

Thanks.

4

I think that’s what Ralph means.
What do you want it to look like when the viewport is more narrow? wider?

Sketches would help. As would any preliminary mark-up you’ve put together so far.

5

Is it possible to hide the carousel when device is smaller like mobile ? Is xs, sm meant for this ?

7

Most frameworks have a “.hide-for-small” class (E.g. that’s the exact class for Foundation). Look in the documentation for bootstraps.

Googled and it looks like bootstraps version of this is “.hidden-sm” (there is also xs for extra smell) etc.

8

The sizes of the columns indicate break points - the point at which this div (col) will stop behaving like a normal col and will instead revert to a different state. Usually that’s the point at which they jump to width 100% and such I think.

As @RyanReese pointed out, there’s also a hide-for-small class. That one would indeed hide the div, again, when reaching that break point.

The other posts were simply saying that the image you posted, literally, isn’t responsive :smiley: and that we need information on how you want it to work, how you want it to respond - and that you need to do some of it yourself. Show us what you have so far. No one is going to code a responsive page for you, but we will help you with your own work!

10

Hi,

Refer the online documentation for Bootstrap

This will help you to get your design done as it provides all the essential stuff which one needs to create a responsive design.

Thanks,
Techbuddy1

11

That will help if OP decided to use Bootstrap - a month ago :wink:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.