What is the best way to create a website where images align perfectly with stacked cards?

Having trouble aligning the image on the right side of my website with two cards on the left side. Here is an example of what I'm aiming for: (https://i.sstatic.net/fBvTQ.jpg)](https://i.sstatic.net/fBvTQ.jpg)

This is the current code:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a5a41464147544575001b061b05185459455d5406">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

  <link href="custom.css" rel="stylesheet">

  <title>#</title>
</head>

<body>
  <header>
    <div class="p-3" id="topHeader">
      <div class="container">
        <div id="row">
          <div class="col-xs 12">
            <h1>This is a Website </h1>
          </div>
        </div>
      </div>
    </div>
  </header>

  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">about</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">contact</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">
      <div class="card mb-5 shadow-sm">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" class="img-fluid" />

        <div class="card-body">
          <div class="card-title">
            <h3>title</h3>
          </div>
          <div class="card-text">
            <p>
              a little text
            </p>
            <button type="button" class="btn btn-secondary btn-sm">button</button>
          </div>
        </div>
      </div>
      <div class="card mb-5 shadow-sm">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" class="img-fluid" />

        <div class="card-body">
          <div class="card-title">
            <h3>title</h3>
          </div>
          <div class="card-text">
            <p>
              a little text
            </p>
            <button type="button" class="btn btn-secondary btn-sm">button</button>
          </div>
        </div>
      </div>
      </div>
    <div class="col-lg-8 col-md-6 col-sm-12" id="image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" class="img-fluid" />
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0905180f2a58445b5b445d">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534e534d501c110d151c4e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
    crossorigin="anonymous"></script>

    <footer>
      copyright me and this website
    </footer>
</body>

</html>

Looking to make the image line up with the cards specifically on larger screens like laptops or PCs.

I've attempted adjustments to the CSS max-width/height properties without success. Unsure if the issue lies in improperly utilizing the id in CSS due to limited experience working with Bootstrap and CSS together.

htmlcssbootstrap-5

Answer №1

In my opinion, a layout with a 2x2 grid could work well for this design. Each grid square in the left column would contain a card, while the right column would have the image stretched across both squares.

.custom-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1em;
}

.custom-grid img {
  width: 100%;
}

.custom-grid .card {
  box-shadow: 0 0 15px rgb(0,0,0,0.1);
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
}

.custom-grid .right-col {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.custom-grid .right-col img {
  height: 100%;
  object-fit: cover;
}
<section class="custom-grid">
  <div class="card">
    <img src="https://picsum.photos/150">
    <p>Card One</p>
    <p><button>Button One</button></p>
  </div>
  <div class="card">
    <img src="https://picsum.photos/152">
    <p>Card Two</p>
    <p><button>Button Two</button></p>
  </div>
  <div class="right-col"><img src="https://picsum.photos/800"></div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

the draggable element turns into nothing

I have created a task manager based on a tutorial I found online. After following the tutorial, I decided to add more functionality by allowing users to add tasks when clicking on a button. Everything works fine until I try to drag one of the added element ...

javascripthtml

AngularJS fails to fetch data from API queries

Currently facing a challenge with retrieving API data in my AngularJS project. The code below successfully fetches the data and logs it on the console as an array, but I am unable to access and utilize it in the front-end. Please note that the placeholder ...

htmlangularjsangularjs-scope

What is the method for including a placeholder with sequential numbering?

When I click on the "Add String" button, it clones the first table row with an input in the table and adds it to the table. I also need to add a +1 number in the placeholder of the copied element. How can I determine the last placeholder before copying and ...

javascriptjqueryhtml

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

Steps to indicate a selected check column in a grid

I am working with a grid that has a check column, and I need to programmatically mark the checkbox. This is how the check column is coded: columns: { items:[ { itemId: 'checkColumn', xtype: 'selectallche ...

javascripthtmlextjs

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

htmlcss

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

Incorporate zoom feature into the jQuery polaroid gallery

Currently, I am utilizing a jQuery and CSS3 photo gallery found on this website. My goal is to allow the images to enlarge when clicked, however, the method provided by the author isn't very clear to me, as I'm not an expert in jQuery. I attempt ...

javascriptjquerycssphoto

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

javascriptjqueryhtmlsharethis

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

htmlcssangularangular-materialmat-form-field

The unattractive visual outcome of Three.js rendering

My goal is to generate a 3D map of buildings using Three.js, based on a 2D SVG file. The process involves taking each path from the SVG, utilizing transformSVGPath from d3.js to create a shape, and then extruding it as shown below: var material = new THRE ...

htmlsvgd3.jshtml5-canvasthree.js

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

How can I include an HTML tag within a select input value in a React.js project?

I am facing an issue while trying to map values from the input field of a select tag. It seems to be returning [Object object] for some reason. When I do not include another tag in the return statement of the map function, the output works fine. However, I ...

javascripthtmlreactjs

Script for automated functions

I have implemented 4 functions to handle button clicks and div transitions. The goal is to hide certain divs and show one specific div when a button is clicked. Additionally, the background of the button should change upon hovering over it. Now, I am look ...

jqueryhtmlcss

I am unable to switch my carousel to full-screen mode

I'm struggling to make the carousel fullscreen even though I've set the width to 100%. Bootstrap was used in this project. Any help would be appreciated. Thank you! <html> <head> <link href="homepage.cs ...

htmlcss

What is the best way to adjust a component to display varying content based on the scenario?

I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have imple ...

htmlcssvue.js

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...

htmlcssangularbootstrapping

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

Troubleshooting: Issues with jQuery animate() not functioning properly when adjusting CSS

Currently, I am experimenting with jQuery's .animate() function to change the background of a div when it is scrolled more than 100 pixels down a page. Previously, I had successfully used .css() for this purpose. JS: $(window).scroll(function () { ...

jqueryhtmlcss