HHow I Fixed My Mobile Website Layout Problem With Simple CSS - My Real Story`
Hello friends. I am Waqas from Kabirwala. I am a frontend developer. I am learning web development from last one year. I want to share my real story with you today. This story is about how my website was breaking on mobile and how I fixed it.
Last month I was making a website for my client. The website was a simple landing page. I made it on my laptop. On laptop it was looking very good. All sections were perfect. Images were good. Buttons were good. I was very happy. I thought my work is finished.
But then I checked the website on my mobile phone. When I opened it on mobile, I was shocked. The website was fully broken. There was horizontal scroll. The text was going out of screen. Images were very big and going out. The 3 boxes which I made in one row were still in one row on mobile and they were very small. My client called me and said Waqas, what is this? Your website is not working on my mobile. I was very tense. Because in Pakistan most people use mobile to open website. If website is not working on mobile then no benefit.
I did not sleep that night. I started searching on Google and YouTube. I watched many videos. I read many articles. First I tried old method with many media queries. I wrote @media max-width 768px and then 480px. But my code became very big and still layout was breaking. I was more confused.
Then after 2 days I found some modern CSS tricks. These tricks are very simple but very powerful. With only 4-5 lines my all problems were fixed. Today I will tell you all those tricks in simple words. If you are beginner like me, this will help you a lot.
My First Mistake - Fixed Width
My first mistake was fixed width. I was using width 1000px for container. I was thinking 1000px is good for laptop. But I forgot about mobile. Mobile screen is only 360px. So if I give 1000px width, then on mobile it will go out. This is the main reason for horizontal scroll.
Bad code that I was using:
.container {
width: 1000px;
}
This code breaks on mobile. Always.
Then I learned good code. The good code is:
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
Now let me explain this in simple words. Width 100% means on mobile it will take 100% of mobile screen. So no scroll. Max-width 1000px means on laptop it will not go more than 1000px. It will be max 1000px. Margin 0 auto means it will stay in center on laptop. Padding left and right 16px means on mobile content will not touch the edge. There will be small space. This is very good.
After I changed all my fixed widths to this, my 50% problems were solved. I was very happy. This is very first step for every beginner. Never use fixed width alone. Always use 100% + max-width.
I Forgot Viewport Tag
Second mistake was very small but very big. I forgot viewport meta tag in HTML. This tag is very important. Without this tag, mobile browser thinks website is for desktop only. So it zooms out and shows desktop version on mobile. That is why layout breaks.
We must add this tag in head section of HTML:
This one line tells mobile browser that this website is responsive. Please show it according to device width. I forgot this in my first project. I was finding bug for 2 days. Then my friend told me about this tag. So please always add this tag. It is must.
My Images Were Breaking Layout
Third problem was images. I was adding images without any CSS. My image size was 1200px wide. On laptop it was okay. But on mobile screen 360px, a 1200px image will definitely go out. It will break layout.
Old way I was giving width to each image separately. It was taking time.
New modern way is to add one global rule for all images, videos and iframes:
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
What is this? Max-width 100% means image will never be bigger than its parent container. If parent is 300px on mobile, image will be 300px. If parent is 1000px on laptop, image will be 1000px. It will never go out. Height auto means image ratio will stay correct. Image will not stretch. Display block removes small gap under image.
I added this one rule at top of my CSS and all my images became responsive automatically. No more breaking. This saved my lot of time.
Text Size Problem on Mobile
Fourth problem was text size. I was using same font size for mobile and desktop. Like h1 font-size 48px. On laptop 48px looks good and big. But on mobile 48px is too big. It takes 3 lines and looks bad. Also it breaks layout.
Old way we used media queries for font size. Like for desktop 48px, for tablet 32px, for mobile 24px. We had to write many media queries.
Modern way is clamp(). Clamp is very amazing function. I love it. Clamp takes 3 values. Minimum value, preferred value, maximum value.
Example:
h1 {
font-size: clamp(24px, 5vw, 48px);
}
Let me explain in simple words. 24px is minimum size. Even on smallest mobile, heading will not go smaller than 24px. 48px is maximum size. Even on biggest desktop, heading will not go bigger than 48px. 5vw is preferred size. 5vw means 5% of viewport width. So it grows with screen size. On mobile it will be near 24px, on tablet near 36px, on desktop near 48px. Automatic.
I now use clamp for everything. Not only for font size but also for padding and gap.
Example for paragraph:
p {
font-size: clamp(16px, 2.5vw, 18px);
line-height: 1.6;
}
Example for section padding:
section {
padding: clamp(20px, 5vw, 80px);
}
On mobile padding 20px, on desktop padding 80px. Automatic. No media query needed. This is modern CSS power.
My 3 Boxes Problem - Flex and Grid
I had 3 service boxes. I wanted to show 3 boxes in one row on laptop, 2 boxes in one row on tablet, and 1 box in one row on mobile. I was using display flex.
My old code:
.cards {
display: flex;
gap: 20px;
}
.card {
width: 300px;
}
Problem was flex by default does not wrap. So on mobile, 3 boxes were still trying to stay in one row. They were squeezed and looking bad and going out.
First fix I learned is flex-wrap:
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 280px;
}
Flex-wrap wrap means if no space, boxes will go to next line. Flex 1 1 280px means minimum width 280px, but can grow if space available. This fixed some problem.
But better fix is CSS Grid with auto-fit. This is best solution I found. One line does everything:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
This line is magic. Let me explain simple. Repeat means repeat columns. Auto-fit means automatically fit how many boxes can fit in screen. Minmax 280px means each box minimum 280px. 1fr means take equal free space.
So on mobile screen 360px wide, only 1 box can fit because 280px minimum. So it shows 1 box per row. On tablet 700px wide, 2 boxes can fit, so 2 per row. On laptop 1200px wide, 4 boxes can fit, so 4 per row. All automatic. No media query at all. I was very surprised when I first used it.
Now I always use this grid trick for all card layouts, product layouts, gallery layouts.
Modern Units - dvh*
Another thing I learned is modern units. For hero section I wanted full screen height. I used height 100vh. But on mobile 100vh has problem. Because mobile browser has address bar at top and bottom. When you scroll, address bar hides and shows, so 100vh changes and layout jumps.
Modern unit is dvh. Dvh means dynamic viewport height. It adjusts with mobile browser address bar.
.hero {
min-height: 100dvh;
display: grid;
place-items: center;
Place-items center is also modern trick. It centers everything both horizontally and vertically with one line. No need for display flex. justify-content center, align-items center 3 lines.
My Final Code That I Use in Every Project*
After learning all these tricks, I made a small boilerplate code. I now paste this code at start of every project. It fixes 90% mobile problems.
- { box-sizing: border-box; margin: 0; padding: 0; }
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
overflow-x: hidden;
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 3vw, 32px,
h1
font-size: clamp(28px, 5vw, 56px
h2 {
font-size: clamp(22px, 4vw, 36px
p {
font-size: clamp(16px, 2.5vw, 18
section.
padding-top: clamp40px, 8vw, 100px
padding-bottom: clamp40px, 8vw, 100px
I use this and my website never breaks on mobile now.
How I Test on Mobile
I test my website with 3 ways. First way is Chrome DevTools. I press F12 on laptop, then click mobile icon. There I can see how website looks on different mobiles like iPhone, Samsung, iPad. Second way is I resize my browser window from big to small manually and see if horizontal scroll comes. If no scroll, then good. Third way is I test on real mobile phones. I send link to my brother and friends and ask them to check on their phones.
If website works on all 3 tests, then it is responsive.
Final Words
Friends, earlier I thought responsive design is very difficult and needs many media queries and big code. But with modern CSS like max-width, clamp, auto-fit grid, dvh, we can make responsive website with very small code and no media queries.
My advice for all beginners from small cities like me: Do not use fixed width, always use max-width with 100%. Always make images responsive with max-width 100%. Use clamp for font size. Use auto-fit grid for cards. And never forget viewport meta tag.
I hope my real story and these simple tricks will help you. I am still learning. If you have any question, you can comment below. I will try to help you.
Thank you for reading my 2000 words article.
Written by Waqas, Frontend Developer from Kabirwala, Pakistan. I make simple and clean websites for local businesses.ow I Fixed My Mobile Website Layout Problem With Simple CSS - My Real Story`
Hello friends. I am Waqas from Kabirwala. I am a frontend developer. I am learning web development from last one year. I want to share my real story with you today. This story is about how my website was breaking on mobile and how I fixed it.
Last month I was making a website for my client. The website was a simple landing page. I made it on my laptop. On laptop it was looking very good. All sections were perfect. Images were good. Buttons were good. I was very happy. I thought my work is finished.
But then I checked the website on my mobile phone. When I opened it on mobile, I was shocked. The website was fully broken. There was horizontal scroll. The text was going out of screen. Images were very big and going out. The 3 boxes which I made in one row were still in one row on mobile and they were very small. My client called me and said Waqas, what is this? Your website is not working on my mobile. I was very tense. Because in Pakistan most people use mobile to open website. If website is not working on mobile then no benefit.
I did not sleep that night. I started searching on Google and YouTube. I watched many videos. I read many articles. First I tried old method with many media queries. I wrote @media max-width 768px and then 480px. But my code became very big and still layout was breaking. I was more confused.
Then after 2 days I found some modern CSS tricks. These tricks are very simple but very powerful. With only 4-5 lines my all problems were fixed. Today I will tell you all those tricks in simple words. If you are beginner like me, this will help you a lot.
My First Mistake - Fixed Width
My first mistake was fixed width. I was using width 1000px for container. I was thinking 1000px is good for laptop. But I forgot about mobile. Mobile screen is only 360px. So if I give 1000px width, then on mobile it will go out. This is the main reason for horizontal scroll.
Bad code that I was using:
.container {
width: 1000px;
}
This code breaks on mobile. Always.
Then I learned good code. The good code is:
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
Now let me explain this in simple words. Width 100% means on mobile it will take 100% of mobile screen. So no scroll. Max-width 1000px means on laptop it will not go more than 1000px. It will be max 1000px. Margin 0 auto means it will stay in center on laptop. Padding left and right 16px means on mobile content will not touch the edge. There will be small space. This is very good.
After I changed all my fixed widths to this, my 50% problems were solved. I was very happy. This is very first step for every beginner. Never use fixed width alone. Always use 100% + max-width.
I Forgot Viewport Tag
Second mistake was very small but very big. I forgot viewport meta tag in HTML. This tag is very important. Without this tag, mobile browser thinks website is for desktop only. So it zooms out and shows desktop version on mobile. That is why layout breaks.
We must add this tag in head section of HTML:
This one line tells mobile browser that this website is responsive. Please show it according to device width. I forgot this in my first project. I was finding bug for 2 days. Then my friend told me about this tag. So please always add this tag. It is must.
My Images Were Breaking Layout
Third problem was images. I was adding images without any CSS. My image size was 1200px wide. On laptop it was okay. But on mobile screen 360px, a 1200px image will definitely go out. It will break layout.
Old way I was giving width to each image separately. It was taking time.
New modern way is to add one global rule for all images, videos and iframes:
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
What is this? Max-width 100% means image will never be bigger than its parent container. If parent is 300px on mobile, image will be 300px. If parent is 1000px on laptop, image will be 1000px. It will never go out. Height auto means image ratio will stay correct. Image will not stretch. Display block removes small gap under image.
I added this one rule at top of my CSS and all my images became responsive automatically. No more breaking. This saved my lot of time.
Text Size Problem on Mobile
Fourth problem was text size. I was using same font size for mobile and desktop. Like h1 font-size 48px. On laptop 48px looks good and big. But on mobile 48px is too big. It takes 3 lines and looks bad. Also it breaks layout.
Old way we used media queries for font size. Like for desktop 48px, for tablet 32px, for mobile 24px. We had to write many media queries.
Modern way is clamp(). Clamp is very amazing function. I love it. Clamp takes 3 values. Minimum value, preferred value, maximum value.
Example:
h1 {
font-size: clamp(24px, 5vw, 48px);
}
Let me explain in simple words. 24px is minimum size. Even on smallest mobile, heading will not go smaller than 24px. 48px is maximum size. Even on biggest desktop, heading will not go bigger than 48px. 5vw is preferred size. 5vw means 5% of viewport width. So it grows with screen size. On mobile it will be near 24px, on tablet near 36px, on desktop near 48px. Automatic.
I now use clamp for everything. Not only for font size but also for padding and gap.
Example for paragraph:
p {
font-size: clamp(16px, 2.5vw, 18px);
line-height: 1.6;
}
Example for section padding:
section {
padding: clamp(20px, 5vw, 80px);
}
On mobile padding 20px, on desktop padding 80px. Automatic. No media query needed. This is modern CSS power.
My 3 Boxes Problem - Flex and Grid
I had 3 service boxes. I wanted to show 3 boxes in one row on laptop, 2 boxes in one row on tablet, and 1 box in one row on mobile. I was using display flex.
My old code:
.cards {
display: flex;
gap: 20px;
}
.card {
width: 300px;
}
Problem was flex by default does not wrap. So on mobile, 3 boxes were still trying to stay in one row. They were squeezed and looking bad and going out.
First fix I learned is flex-wrap:
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 280px;
}
Flex-wrap wrap means if no space, boxes will go to next line. Flex 1 1 280px means minimum width 280px, but can grow if space available. This fixed some problem.
But better fix is CSS Grid with auto-fit. This is best solution I found. One line does everything:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
This line is magic. Let me explain simple. Repeat means repeat columns. Auto-fit means automatically fit how many boxes can fit in screen. Minmax 280px means each box minimum 280px. 1fr means take equal free space.
So on mobile screen 360px wide, only 1 box can fit because 280px minimum. So it shows 1 box per row. On tablet 700px wide, 2 boxes can fit, so 2 per row. On laptop 1200px wide, 4 boxes can fit, so 4 per row. All automatic. No media query at all. I was very surprised when I first used it.
Now I always use this grid trick for all card layouts, product layouts, gallery layouts.
Modern Units - dvh*
Another thing I learned is modern units. For hero section I wanted full screen height. I used height 100vh. But on mobile 100vh has problem. Because mobile browser has address bar at top and bottom. When you scroll, address bar hides and shows, so 100vh changes and layout jumps.
Modern unit is dvh. Dvh means dynamic viewport height. It adjusts with mobile browser address bar.
.hero {
min-height: 100dvh;
display: grid;
place-items: center;
Place-items center is also modern trick. It centers everything both horizontally and vertically with one line. No need for display flex. justify-content center, align-items center 3 lines.
My Final Code That I Use in Every Project*
After learning all these tricks, I made a small boilerplate code. I now paste this code at start of every project. It fixes 90% mobile problems.
- { box-sizing: border-box; margin: 0; padding: 0; }
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
overflow-x: hidden;
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 3vw, 32px,
h1
font-size: clamp(28px, 5vw, 56px
h2 {
font-size: clamp(22px, 4vw, 36px
p {
font-size: clamp(16px, 2.5vw, 18
section.
padding-top: clamp40px, 8vw, 100px
padding-bottom: clamp40px, 8vw, 100px
I use this and my website never breaks on mobile now.
How I Test on Mobile
I test my website with 3 ways. First way is Chrome DevTools. I press F12 on laptop, then click mobile icon. There I can see how website looks on different mobiles like iPhone, Samsung, iPad. Second way is I resize my browser window from big to small manually and see if horizontal scroll comes. If no scroll, then good. Third way is I test on real mobile phones. I send link to my brother and friends and ask them to check on their phones.
If website works on all 3 tests, then it is responsive.
Final Words
Friends, earlier I thought responsive design is very difficult and needs many media queries and big code. But with modern CSS like max-width, clamp, auto-fit grid, dvh, we can make responsive website with very small code and no media queries.
My advice for all beginners from small cities like me: Do not use fixed width, always use max-width with 100%. Always make images responsive with max-width 100%. Use clamp for font size. Use auto-fit grid for cards. And never forget viewport meta tag.
I hope my real story and these simple tricks will help you. I am still learning. If you have any question, you can comment below. I will try to help you.
Thank you for reading my 2000 words article.
Written by Waqas, Frontend Developer from Kabirwala, Pakistan. I make simple and clean websites for local businesses.
Top comments (0)