CODEWITHSUNDEEP
htmlcss
mweinberg
mweinberg

Reputation: 171

Responsive CSS limiting images to half the screen, want to display them horizontally

I have manged to piece together enough html/css from sources online to almost be able to do what I want. I am trying to display n (currently 4) images with buttons in the center next to each other horizontally across the top of the page. I have the four images loading with a button in the middle. I have them surrounded by a box. I have them acting responsively to the size of the browser (within reason).

Unfortunately, for a reason that is unclear to me, the images will only spread about half way across the box:

enter image description here

Here is what I believe to be the relevant html:

<div id ="buttonWrapper">


    <div class="container" id="position1">
      <img src="images/originals/mountainclimber.jpg" alt="Mountain Climber">
      <button class="btn" id="mountainHtmlButton">The Mountain Climber</button>
    </div>

    <div class="container" id="position2">
      <img src="images/originals/fuchun.jpg" alt="Fuchun">
      <button class="btn" id="fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
    </div>

    <div class="container" id="position3">
      <img src="images/originals/palace.jpg" alt="Palace">
      <button class="btn" id="palaceHtmlButton">Amailenborg Palace Square</button>
    </div>

    <div class="container" id="position3">
      <img src="images/originals/udnie.jpg" alt="Udnie">
      <button class="btn" id="udnieHtmlButton">Udnie</button>
    </div>

</div>

And the corresponding relevant CSS:

/* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 25%;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}

/*
**********
Section for button alignment/positioning stuff
**********
*/

#buttonWrapper {
    background-color: black;
    border-radius: 10px;
}

#position1 {
    float: left;
    /*width: 25%; */
    overflow: hidden;
}

#position2 {
    overflow:hidden;
}

#position3 {
    overflow:hidden;
}

#position4 {
    overflow:hidden;
}

The only 50% references I see appear to be tied to the button placement. But I clearly do not fully understand what is happening here. Again, my ideal outcome here is that the 4 images are displayed side by side horizontally all the way across the black background (assuming the window size is something reasonable). I know that will still look slightly strange because of the different aspect ratios of the images.

thank you for any help

Upvotes: 0

Views: 1325

Answers (2)

Atul Rajput
Atul Rajput

Reputation: 4178

Follow this in your CSS.

  1. Give your container float:left; width: 25%; and position:relative;
  2. .container img { width: 100%; object-fit: cover; height: auto;}
  3. last thing from your html , make correction in ID names. You can not repeat ID name, You have repeated position3 ID twice.

Upvotes: 1

doğukan
doğukan

Reputation: 27399

#buttonWrapper {
  display:flex;
}

/* ↑ i added above code ↑ */

.container {
  position: relative;
  width: 25%;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}

/*
**********
Section for button alignment/positioning stuff
**********
*/

#buttonWrapper {
    background-color: black;
    border-radius: 10px;
}

#position1 {
    float: left;
    /*width: 25%; */
    overflow: hidden;
}

#position2 {
    overflow:hidden;
}

#position3 {
    overflow:hidden;
}

#position4 {
    overflow:hidden;
}
<div id ="buttonWrapper">


    <div class="container" id="position1">
      <img src="https://picsum.photos/300/700" alt="Mountain Climber">
      <button class="btn" id="mountainHtmlButton">The Mountain Climber</button>
    </div>

    <div class="container" id="position2">
      <img src="https://picsum.photos/300/700" alt="Fuchun">
      <button class="btn" id="fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
    </div>

    <div class="container" id="position3">
      <img src="https://picsum.photos/300/700" alt="Palace">
      <button class="btn" id="palaceHtmlButton">Amailenborg Palace Square</button>
    </div>

    <div class="container" id="position3">
      <img src="https://picsum.photos/300/700" alt="Udnie">
      <button class="btn" id="udnieHtmlButton">Udnie</button>
    </div>

</div>

Upvotes: 2

Related Questions