place an image and text side by side inside div
Question
I want to place an image and some text describing it. This should be responsive, ie img and text should be side-by-side in large screen and top-bottom on smaller screen. So, basically, before you tag, its exactly same as Two Divs next to each other, that then stack with responsive change
But this is not working.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="groupi">
<div id="one">
<img src="hello.jpg" style="width:10vw"/> </div>
<div id="two">Hello World</a></div>
</div>
</body>
</html>
and css:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
margin:0;
font-family: Arial, Helvetica, sans-serif;
}
.groupi {
border : 2px solid #000;
overflow:hidden;
}
.gruopi div {
min-height: 200px;
padding: 10px;
}
#one {
float: left;
padding-top:4vw;
margin-left:3vw;
margin-right: 1vw;
margin-bottom: 5vw;
width: 10vw;
border-right:2px solid #000;
}
#two {
background-color: black;
overflow:hidden;
margin:1vw;
border:2vw dashed #ccc;
min-height:2vw;
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
#two{
}
}
I am very new, and some help will be deeply appreciated.
1 answers
solution1
0 2018-08-17 09:42:27
If you want your second div element (#two) to stack when your viewpoint is less than 600px wide, you can add the following to your media query:
#one {
float: none;
}
So your full media query is:
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
#one{
float: none;
}
}
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.