I think one way you could approach this is use flexbox. Based on your question, this should work for you:
@media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
}
Also, your buttons appear large likely because you have not adjusted their size in the media query. You will need to move the button styles out of your html and into your css file for the media query to work, since the inline css will override the referenced css file.
add position: absolute to tour class .imgbox
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: absolute; //ADD POSITION ABSOLUTE
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
@media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
I recommend you use one single class to your buttons, and dismiss the “style” attribute, to this way your code is more clean
the gray buttons show on top of the gif image in mobile version also they are not responsive and show quite big. If you have any ideas i would highly appreaciate.
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
@media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
<div class="imagebox">
<img src="https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612" width="472px" height="423px" />
</div>
<div class="textbox-cont">
<div class="textbox">
<button style="background-color:#CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;">Natural Silver</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 160px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px; ;">Night Blue</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Cardinal Red</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Coral Orange</button>
<br>
<p><b>Custom colors are available upon request.</b></p>
</div>
</div>
Hi, i want to move the buttons below the picture, they currently show on top of it and they seem like cut (only on the mobile version). When you run code snippet it shows the problem.
ohh ok, sorry, i understand first time, you have a transform: translateY(-50%); why? maybe that is the problem, if you want make your web responsive you can use relative sizes. U can use flexbox
