What is the best way to align an image and text in a grid?

As a novice in the world of HTML and CSS, I am attempting to master the 1fr 1fr grid layout for my "welcome" section. My goal is to have an image on the left side and text on the right side. However, when I switch to Responsive mode in Inspect, my grid collapses either when the width drops below 1300 or the height goes under 900.

This section comes right after the header, so my dilemma is how to tackle this issue. I don't want to proceed with building the entire page only to realize later that I need numerous lines of media queries due to starting off on the wrong foot :)

I envision something similar to this: Example

Here's the code I have:

.welcome {
  padding: 7em 0;
  display: flex;
  justify-content: center;
}

.welcome-container {
  display: grid;
  justify-content: center;
  align-content: stretch;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  background-color: white;
  height: 50vh;
  width: 50vw;
  overflow: hidden;
}

.welcome-left {
  padding: 3em;
  border: 1px blue solid;
  text-align: center;
}

.welcome-img {
  background-image: url(../../img/tetiana-padurets-B-xb7VFtlZg-unsplash.jpg);
  width: 100%;
  height: 100%;
}

.img {
  display: block;
}

.welcome-right {
  border: 1px red solid;
  padding: 5em 3em;
}

.welcome-title {
  text-align: center;
  color: #3f3f3f;
  font-weight: 400;
  margin-top: 1em;
}
<section class="welcome">
    <div class="welcome-container">
      <div class="welcome-left">
        <div class="welcome-img"></div>
      </div>
      <div class="welcome-right">
        <h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
        <p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores. 
        </p>
      </div>
    </div>
  </section>

Cheers!

htmlcsscss-grid

Answer №1

<section class="new-section">
    <div class="section-container">
      <div class="section-left">
        <div class="section-img">
            <img class="image-new" src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U">
        </div>
      </div>
      <div class="section-right">
        <h2 class="section-title"><span>New Title!</h2></span>
        <p class="section-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores. 
        </p>
      </div>
    </div>
  </section>

In CSS

.new-section {
  display: grid;
  justify-content: center;
  width: 100%;
}

.section-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: white;
  width: 50vw;
}

.section-left {
  padding: 10px;
  border: 1px blue solid;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-new {
  width: 100%;
  height: auto;
}

.img {
  display: block;
}

.section-right {
  border: 1px red solid;
  padding: 10px;
}

.section-title {
  text-align: center;
  color: #3f3f3f;
  font-weight: 400;
  font-size: 2vw;
  margin-top: 1em;
}

.section-desc {
  font-size: 1vw;
}

.section-img {
  width: 100%;
}

Perhaps this is what you're looking for.

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

Issue arising from background-image and content property size

.section--7__photos { height: 50vw; max-height: 70rem; margin: 0 8%; background: url("https://ableton-production.imgix.net/about/photo-8.jpg?crop=right&dpr=1.5&fit=crop&h=250&ixjsv=1.1.3&q=66&w=417") no-repeat top 0% center/ ...

cssbackground-image

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

javascriptpythonhtmlflaskweb-applications

Arrange the items in the Navbar

Can someone please help me with a glitch I'm experiencing that is causing my Navbar items to not align properly? (See Navbar preview) I have attempted to fix it by adjusting the margin and padding manually, but my lack of Bootstrap knowledge has hin ...

htmlcssdjangobootstrap-4navbar

What are some ways to implement querySelectorAll in conjunction with htmx?

I'm currently using htmx, an amazing library with a small issue that I'm struggling to resolve. htmx utilizes querySelector to find elements for swapping or updating, for example with hx-swap="...", hx-target="...". How can I use querySelectorAll ...

javascripthtmlhtmx

In HTML, the usage of "*" and <body> element within a <style

Can you explain the distinction between * and body when used in the style tag of HTML? Providing examples would greatly aid my understanding. Thank you! ...

html

How to implement a two-column layout within an IE contenteditable element

Currently, I am working on a contenteditable element that requires content to be displayed in a two-column layout. Users should have the ability to place the cursor anywhere within the text and move between positions using arrow keys. To achieve this, I a ...

htmlcssinternet-explorercontenteditable

Unable to attach the event listener for the 'onchange' event to a div nested within a ul element

Here is the HTML code I am working with: <ul> <li> <a href="#"> <div></div> Actions <div></div> </a> <ul> <li> <a> &l ...

jqueryhtmlhtml-listsbindonchange

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

javascripthtmlcssreactjsantd

Tips for eliminating default classes from Mui Typography styling

I’ve been working on creating a Typography element and noticed some default MUI CSS classes added when debugging in the browser. I attempted to disable them by using empty arrays at the end of the sx prop, but it did not work as expected. In the image p ...

javascripthtmlcssreactjsmaterial-ui

Why is the query outputting a variable with additional values attached to it?

$currentFile = $_SERVER["SCRIPT_NAME"]; $img = array_pop(explode("/", $currentFile)); $fileName = basename($img, ".php").PHP_EOL; echo $fileName; Echo'd results: placementName $query = "SELECT * FROM image_Name WHERE name = '" . mysql_real_ ...

phphtmlmysqldatabase

Use a boolean value to determine the styling of multiple items simultaneously

I'm currently attempting to modify the appearance of the bars in each area (a total of 12), so that a value of 1 equates to true (displayed as green) and a value of 0 equates to false (displayed as red). This will dynamically change the color of each ...

javascripthtmlcss

Choosing a group of kids who all share the same element tag

I currently have a situation where I need to display only the first two paragraphs in a div when the page loads, with the remaining paragraphs hidden. I am struggling to achieve this and am seeking guidance on how to do so. In the jsfiddle example provided ...

javascriptjqueryhtmlcss

Lines running horizontally on either side of the text

I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...

htmlcsswordpress

Having difficulty fully modifying the jQuery class

My goal is to create an emoji system using a file named emoji.css to store the emojis. The names of the emojis are stored in a JavaScript array with some modifications. When users input an emoji text like :emoji: or :another-emoji:, JavaScript should check ...

javascriptjqueryhtmlemoji

Ways to create sidebar images in a dual-column layout

I am currently working on creating images for my sidebar that have the same width but different heights. I am trying to achieve this without any spaces between the images. To get a better understanding of what I am trying to do, please refer to the follow ...

htmlcssvue.js

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

CSS selector for the only child element without any other adjacent sibling elements that are non-space characters

Here is a snippet of my code: <!DOCTYPE html> <html> <head> <style> code { display: inline-block; padding: 0; color: red; } p > code:only-child { display: block; white-space: pre; padding: 20px; line-height: 125 ...

htmlcss

The feature to Select/DeSelect All does not function properly when dealing with individual records

Here's the JavaScript code I'm working with: if (document.forms[0].Check_All.value=="Select All") { for (i = 0; i < chk.length; i++) { chk[i].checked = true; document.forms[0].Check_All.value = "DeSel ...

javascripthtmljsp

After exiting the PWA, the IOS camera displays a black screen

I have implemented an HTML file input to open the camera and capture photos for my Progressive Web App (PWA). <input type="file" accept="image/*" capture="camera" name="photo" id="photo-input-js" data-project-id="<?php echo $projectId ?>"> // ...

javascripthtmliosprogressive-web-apps

What is the best way to align a scalable SVG image in the center?

My goal is to horizontally align this SVG within its container, which could be any div, body, or other element. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> &l ...

htmlcsssvg