Situation: In my scenario, there is an image with two buttons below it, all of which share the same width.
Issue: When the viewport is too wide horizontally, the buttons are not visible without scrolling down. This poses a challenge for tablets and small laptops. The current CSS styling I am using is as follows:
.image{
width:90%;
height: 50%;
max-width: 500px;
max-height: 250px;
margin-bottom: 10px;
}
.buttonAnswer{
width: 90%;
max-width: 500px;
font-size: 25px;
I am looking for a solution, whether through media queries or any other method, to resize both the buttons and the image so that they are visible without requiring scrolling on any device size.
It's somewhat challenging to demonstrate the issue. Check the content below, then reduce the viewport to a narrow height and wide width, you will notice that only the image is visible initially and you have to scroll to see the buttons.
.image {
width: 90%;
height: 50%;
max-width: 500px;
max-height: 250px;
margin-bottom: 10px;
}
.buttonAnswer {
width: 90%;
max-width: 500px;
font-size: 25px;<img class='image center-block' id='image2' src='https://i.imgur.com/AMTXZ2R.jpg' alt="Girl trying to get a job">
<button id='stepOneYes2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer buttonSpace'> Yes </button>
<button id='stepOneNo2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer'> No </button>