Issue
I am new to html and css. My question is how do I place image and two buttons to be sure that they will be displayed together? Look at the image to understand what i mean. Thanks!!!!
Solution
This is my solution. Try opening the snippet in full screen, and then resize the browser.
When the width of the screen is greater than 768px
(u can change this value) the width of the container
is 500px
.
And when the width is less, then the container takes full width of the screen.
This is handled by
.container {
width: 500px;
margin: 0 auto;
}
@media(max-width:768px) {
.container {
width: 100%;
}
}
As for the buttons, their combined width will be always equal to that of the image.
This is handled by
.btn-container {
font-size: 0;/*used for removing whitespace from inline elements*/
}
.btn-container button {
width: 50%;
font-size: initial;
padding: 15px;
}
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: 0 auto;
}
@media(max-width:768px) { /* can be any number less than this depending on ur choice */
.container {
width: 100%;
}
}
img {
display: block;
width: 100%;
height: 200px;
}
.btn-container {
font-size: 0;
}
.btn-container button {
width: 50%;
font-size: initial;
padding: 15px;
}
/*Space between */
.btn-holder {
width: 50%;
display: inline-block;
}
.btn-holder button {
width: 100%;
}
.b1 {
padding-right: 5px;
}
.b2 {
padding-left: 5px;
}
<div class="container">
<img src="http:placehold.it/250x250">
<div class="btn-container">
<button>button 1 </button>
<button>button 1 </button>
</div>
</div>
<br/>
<br/>
<br/>
<h3>If u want space between buttons</h3>
<div class="container">
<img src="http:placehold.it/250x250">
<div class="btn-container">
<div class="btn-holder b1">
<button>button 1 </button>
</div>
<div class="btn-holder b2">
<button>button 1 </button>
</div>
</div>
</div>
Answered By - Gautam Naik Answer Checked By - Gilberto Lyons (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.