How to create a responsive div on image?
Multi tool use
How to create a responsive div on image?
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: -10px;
background-color: green;
}
.mytag {
float: left;
position: absolute;
left: 60px;
top: -10px;
background-color: green;
}
Featured
My list
<img src="http://www.placehold.it/200x200">
</div>I'm trying to create a div on image, but i'm not able to create a responsive one.
I'm trying to create a replica of this website as i'm a beginner. I want to create the first section, which should be a responsive one (plan and design and our goal should be on the image) How can i achieve the same? check here
How to make it a responsive?
As @CodeMan said, try looking into the debugger mode. The easiest way would be to put the image as a background.
– yomisimie
Jul 2 at 14:09
@CodeMan i have edited it with the code. I want to make it a responsive one. How can i do that?
– ravan one
Jul 3 at 5:12
1 Answer
1
The website you have mentioned uses a background image, Here is an example of achieving it.
First create your wrapper div and then apply a background image for it. make it relatively positioned. Make the other child content boxes absolute positioned. so you can move them freely using top, left, right and bottom css acttributes within its parent
absolute
top
left
right
bottom
html
content here
</div>
css
.div-with-bg-img {
width: 350px;
height: 150px;
background: url(http://via.placeholder.com/350x150);
margin-top: 100px;
position: relative;
}
.content-div {
width: 100px;
height: 50px;
background: tomato;
position: absolute;
top: -10px;
left: 40px;
}
if you want to make it responsive then apply relative measurement units
.div-with-bg-img {
width: 100%;
height: 150px;
background: url(http://via.placeholder.com/350x150) no-repeat;
margin-top: 100px;
position: relative;
background-size: cover;
background-position: center;
}
Use media queries to make your website responsive
Here is an example code
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
Few useful articles I found on web
List of media queries
What is RWD
If you just want to know how to make an image responsive here is a nice article published on css tricks
https://css-tricks.com/responsive-images-css/
You can use the browser dev tools to learn the website source codes :)
Thank you. But How can we make them responsive completely ?
– ravan one
Jul 3 at 5:29
You could use css media queries to target different view port sizes, device widths etc to make your website responsive
– Monkey D Luffy
Jul 3 at 5:35
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Share your code or else no once can help you. Just a suggestion, you can always look at layout of any website by going to debugger mode. Try implmenting divs same way as website did.
– CodeMan
Jul 2 at 12:40