how to make a responsive box using html code?
Question
On my blog posts, I have made boxes that have pictures and texts.
They look broken on mobile while working completely fine on PC .
So I am trying to make a box that will look fine both on mobile and PC environment, using html code. but it seems like 'using px or a percentage does not help'!! I will give you more detailed explanation of my problem as follows!
1st problem: the texts go out of the box on mobile
The problem picture (on mobile) texts going out of the box:
The box should have looked like this (on PC): a perfect box including texts and a pic 2
The html code to make this box is as follows:
<!DOCTYPE html>
<div style="height:300px; width:400px; border: 5px outset #000000;
box-shadow:5px 5px 15px #000808;background-color:rgb(249,249,249);">
<html>
<a href="http://www.yes24.com/24/goods/42487097?scode=029">
<img src="http://image.yes24.com/momo/TopCate1281/MidCate009/128080813.jpg"
height = "300px" align="left"/><br>
<body>
<strong>디지털 노마드(도유진 저)</strong><br>
출판 : 남해의봄날<br>
발매 : 2017.06.10<br>
</body>
</html>
</div>
As you can see, the problem is that texts located on the right side of the picture are pushed off to the bottom of the mobile screen. Then texts got mixed, which became unreadable.
I have used px to program the height and width of the box. I have also used px to write the border of the boxes.
I have tried with %,rem,em, several different methods to make a box on my blog posts, but they still do not work on the mobile environment. How can I code to make them look good on PC and mobile altogether?
2nd problem (similar problem): cannot be seen on mobile
The problem picture (on mobile): A picture got cut off on the right end
The box should have looked like this (on PC): You can see the whole picture
<!DOCTYPE html>
<div style="width:480px; border: 5px outset #000000; height:
auto;box-shadow:7px 7px 20px #000808;background-color:rgb(249,249,249);">
<html>
<a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html">
<img src="http://2.bp.blogspot.com/-v9CzVdQnsYw/UibtvHFD18I/AAAAAAAABBI/
X-rjZWuarII/s1600/bongwon+suh.png" width="480px" align="top"/><br>
<body>
<p style="width:470px;"><strong>""이제 한우물만 파서는 안 돼"</strong><br></p>
<p style="width:470px;">"1990년대까지는 넓게 알되 한 분야에 능통한 'T'형"</p>
</body>
</html>
</div>
Since i used "px" to make a box, the picture in a box got gut off on the right end when it's shown on a mobile screen.
Any help or advice to solve this problem is greatly appreciated.
2 answers
solution1
0 ACCPTED 2017-12-02 08:21:09
You need to use max-width instead of width then make the width always 100%. With this configuration you will have the desired width on desktop and on mobile it will take the width of the screen.
A side note : your html is not valid as it's not correct to put html and body tag inside div. All you content should go inside the body tag
<!DOCTYPE html> <div style="max-width:480px;width:100%; border: 5px outset #000000; height: auto;box-shadow:7px 7px 20px #000808;background-color:rgb(249,249,249);"> <html> <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html"> <img src="http://2.bp.blogspot.com/-v9CzVdQnsYw/UibtvHFD18I/AAAAAAAABBI/ X-rjZWuarII/s1600/bongwon+suh.png" style="max-width:100%;" align="top" /><br> <body> <p style="max-width:470px;width:100%;"><strong>""이제 한우물만 파서는 안 돼"</strong><br></p> <p style="max-width:470px;width:100%;">"1990년대까지는 넓게 알되 한 분야에 능통한 'T'형"</p> </body> </html> </div>
A better code with valid html :
<!DOCTYPE html> <html> <body style="max-width:480px;width:100%; border: 5px outset #000000; height: auto;box-shadow:7px 7px 20px #000808;background-color:rgb(249,249,249);"> <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html"> <img src="http://2.bp.blogspot.com/-v9CzVdQnsYw/UibtvHFD18I/AAAAAAAABBI/ X-rjZWuarII/s1600/bongwon+suh.png" style="max-width:100%;" align="top" /></a> <p style="max-width:470px;width:100%;"><strong>""이제 한우물만 파서는 안 돼"</strong><br></p> <p style="max-width:470px;width:100%;">"1990년대까지는 넓게 알되 한 분야에 능통한 'T'형"</p> </body> </html>
solution2
0 2017-12-02 09:23:42
Your HTML code is not a proper format. You have to use div inside body tag.
First solution
If you want to create the column then you can use the flex . set display: flex to the parent div and set flex:1 to the child div.
.parent_div{ height:auto; width:400px; border: 5px outset #000000; box-shadow:5px 5px 15px #000808; background-color:rgb(249,249,249); } .parent_div img{ width: 100%; } .parent_div a{ display: flex; } .first{ flex: 1; } .two{ flex: 1; } @media only screen and (max-width : 685px) { .parent_div{ width: 100%; }
<div class="parent_div"> <a href="http://www.yes24.com/24/goods/42487097?scode=029"> <div class="first"> <img src="http://image.yes24.com/momo/TopCate1281/MidCate009/128080813.jpg" align="left"/> </div> <div class="two"> <strong>디지털 노마드(도유진 저)</strong><br> 출판 : 남해의봄날<br> 발매 : 2017.06.10<br> </div> </a> </div>
Second solution
Create a parent div and set the width:480px and set width:100% to the image. it will display perfectly on the desktop and laptop.
For the mobile device, you have to use the @media query
@media only screen and (max-width : 685px) {
.parent_div{
width: 100%;
}
Set 100% width to the parend div in the media query.it will work perfectly.
body{ margin: 0; padding: 0; } .parent_div{ width:480px; border: 5px outset #000000; height: auto; box-shadow:7px 7px 20px #000808; background-color:rgb(249,249,249); } .parent_div img{ width: 100%; } @media only screen and (max-width : 685px) { .parent_div{ width: 100%; } }
<div class="parent_div"> <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html"> <img src="http://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg" align="top"/><br> <p><strong>klajldjskldjlksd</strong><br></p> <p>'ask;ldksldkl;sk;ldas;l</p> </a> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.