How to create responsive layouts with Flexbox

Flexbox is a relatively new front-end feature that makes building a website layout (and making it responsive!) much, much easier than it used to be. In days past, to build a website, you would have to use float grids or even tables to make your layout look like it should. And those methods aren’t the best for responsive design– making sure the website looks good across desktop, tablet, and mobile devices.

If you want to stay current with web development trends, you definitely want to know how to use flexbox.

In this tutorial, we are going to learn how can we make three cards responsive.

Have a look at these examples,

Desktop view

Tablet View

Mobile View

We are not going to use any “Media Queries” to make it responsive. The only this we define is the flex property

Wrap property will help us to make cards responsive in our particular case, so we can see the beautiful layout on desktop, tablet, and mobile view.

Have a look at the HTML code for creating card,

First of all, in the body tag, we will be having the main tag which contains our content

     <div class="sig">
<p class="name">Zeeshan Shaheen</p>
<p class="company">ABC Company</p>
</div>
</div>
</main>

So after CSS, it will look like this

So now we’ll see how can we create the quotation marks and signature line responsive, so it does not matter how long the sentence or the name is, it will adjust itself.

So in CSS by using the ::before and ::after property, we can make these responsive.

We will be using

content: close-quote;

to add quotation marks. To add these symbols before and after the paragraph or text we use

.qoute::after {
content: close-quote;
top: 1rem;
left: 13rem;
}

To make the signature line responsive, we will use

Here is the full HTML code of layout

Here is the full CSS of layout

I hope this article was very helpful, please let me know in the comments if you have any questions. I will try to answer them.

regards,

Zeeshan Haider Shaheen

Fullstack Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store