Arrange three images and three text lists in a horizontal layout with responsiveness

Struggling with a HTML/CSS challenge here! I'm attempting to vertically align 3 images and text in the pattern of image, text, image, text, image, text. Everything looks great on my 13" MacBook, but once I start resizing the window, chaos ensues. Any tips on making this formatting responsive to screen size?

P.S. Managed to get it working for mobile though.

This is my code:

.checklogostyle {
  vertical-align: middle; 
  margin-top: 10px; 
  padding-left:13%; 
  float:left;
}

@media (max-width:768px) {
  .checklogostyle {
  vertical-align: middle; 
  margin-top: 30px; 
  margin-left:20px; 
    margin-right: 20px;
  float:left;
  }
}

.brandstext {
  padding-left:12%; 
  float:left; 
  text-align:left; 
}

@media (max-width:768px) {
  .brandstext {
  margin-left:0px;
    margin-top:20px;
  float:center; 
  text-align:left; 
  }
}


.brandstextlast {
  margin-left:20px; 
  float:left; 
  text-align:left; 
}

@media (max-width:768px) {
  .brandstextlast {
  margin-left:20px; 
    margin-top:20px;
  float:left; 
  text-align:left; 
  }
}
<div class="checklogostyle">
      <img src="{{'checklogo.png' | asset_url}}">
</div>
<div class="brandstextlast">
    <span>Bernhardt <br> Century Furniture <br> John Richard <br> Hickory White</span>
</div>
<div class="checklogostyle">
      <img src="{{'checklogo.png' | asset_url}}">
</div>
<div class="brandstextlast">
    <span>Hooker Furniture <br> Hudson Valley <br> Robert Abbey <br> Theodore Alexander</span>
</div>
<div class="checklogostyle">
      <img src="{{'checklogo.png' | asset_url}}">
</div>
<div class="brandstextlast">
    <span>Visual Comfort <br> Vanguard Furniture <br> Uttermost <br> Yachtline</span>
</div>

I believe I need to wrap the content in a container, but I can't quite figure it out. Any assistance would be greatly appreciated, especially if you can explain the reasoning behind it so I can apply it to other projects in the future!

Thank you!

Image example of my current progress

htmlcss

Answer №1

Utilizing the power of display: flex; allows for seamless responsive design. Opt for flex-direction: row; on larger screens and flex-direction: column; on smaller ones.

.flex-wrapper {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}
.flex-element {
  display:flex;
  flex-direction: row;
}
.brandstextlast {
  margin-left:60px; 
}
.checklogostyle img {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.checklogostyle {
  position: relative;
}
@media (max-width:768px) {
  .flex-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .flex-element {
    width: 200px;
  }
}
<div class="flex-wrapper">
   <div class="flex-element">
      <div class="checklogostyle">
         <img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1">
      </div>
      <div class="brandstextlast">
         <span>Bernhardt <br> Century Furniture <br> John Richard <br> Hickory White</span>
      </div>
   </div>
   <div class="flex-element">
      <div class="checklogostyle">
         <img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1">
      </div>
      <div class="brandstextlast">
         <span>Hooker Furniture <br> Hudson Valley <br> Robert Abbey <br> Theodore Alexander</span>
      </div>
   </div>
   <div class="flex-element">
      <div class="checklogostyle">
         <img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1">
      </div>
      <div class="brandstextlast">
         <span>Visual Comfort <br> Vanguard Furniture <br> Uttermost <br> Yachtline</span>
      </div>
   </div>
</div>

Answer №2

You might want to consider using Flexbox. I also made some adjustments to your HTML.

Update: Take a look at the full-screen preview for the desktop version. We have added a media query at 680px, but feel free to modify it to suit your needs. 

.container-row {
  display: flex;
  max-width:1100px;
  justify-content: space-between;
  margin: auto;
}

.column {
  display: flex;
}

@media screen and (max-width:680px) {
  .container-row {
    flex-direction: column;
  }
}

.brandstext {
  padding-left: 10px;
}
<div class="container-row">
  <div class="column">
    <div class="checklogostyle">
      <img src="//placehold.it/60x60">
    </div>
    <div class="brandstext">
      <span>Bernhardt <br> Century Furniture <br> John Richard <br> Hickory White</span>
    </div>
  </div>
  <div class="column">
    <div class="checklogostyle">
      <img src="//placehold.it/60x60">
    </div>
    <div class="brandstext">
      <span>Hooker Furniture <br> Hudson Valley <br> Robert Abbey <br> Theodore Alexander</span>
    </div>
  </div>
  <div class="column">
    <div class="checklogostyle">
      <img src="//placehold.it/60x60">
    </div>
    <div class="brandstext">
      <span>Visual Comfort <br> Vanguard Furniture <br> Uttermost <br> Yachtline</span>
    </div>
  </div>
</div>

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

Ways to customize label appearance within a TextField using the createTheme function

I attempted to modify the margin of a label using em/rem units instead of px (refer to the image attached to this question), but I am unsure where to apply the styles for proper structuring. I have checked the MUI documentation but couldn't find infor ...

cssreactjsmaterial-ui

Using ReactJS and JavaScript to transform an array into a fresh array

I am working with an array that looks like this: var oldArray = [ {number: '12345', alphabet: 'abcde'}, {number: '54321', alphabet: 'abcde'}, {number: '67891', alphabet: 'abcde'}, ...

javascripthtmlarraysreactjs

How can I dynamically adjust the stroke length of an SVG circle using code?

In my design project, I utilized Inkscape to create a circle. With the fill turned off, only the stroke was visible. The starting point was set at 45 degrees and the ending point at 315 degrees. After rotating it 90 degrees, here is the final outcome. < ...

javascripthtmlsvg

"Enhance your ASP.NET site with a captivating background

I am currently working with C# in VS2005. My challenge is to add a background image to my login page, which is in the form of an .aspx file. Here is a screenshot of my current setup: Here is the code snippet for my background: <div align="center" ...

c#asp.nethtml

Getting the value of radio button groups in C# - A complete guide

Here is the HTML code: <form runat="server"> <table> <tr> <td> From Date: </td> <td> <input type="text" runat="ser ...

c#htmlasp.net

Three-dimensional.js and components of the design

Looking for advice on how to manipulate individual parts of a 3D model in Three.js. My model is made up of various components that I need to control separately. Any tips or suggestions would be greatly appreciated. Thank you! ...

jsonhtmlthree.jswebgl

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

javascriptjquerycsshtml

Expanding circle with CSS borders on all edges

My goal is to create a background reveal effect using JavaScript by increasing the percentage. The effect should start from the center and expand outwards in all directions. Issue: The percentage increase currently affects only the bottom and not the top ...

javascriptjqueryhtmlcss

Is there a way to determine if a container is overflowing at the top?

Currently, I am using Puppeteer to scrape Slack. My goal is to confirm whether I have scrolled to the very top of the channel feed. The issue arises because the channel feed does not actually scroll, making it impossible for me to utilize the method outli ...

javascripthtmlcssoverflow

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

Encountering an issue with my pie chart rendering outside of its parent div when placed within a dropdown menu. The chart successfully loads after the page is loaded, but only displays correctly if I hover over the dropdown and allow it to load. If I do ...

javascriptjqueryhtmlcssgoogle-pie-chart

Learn the art of closing an AngularJS accordion automatically when another accordion is opened within an AngularJS application

I have encountered an issue with the AngularJS accordion functionality. It seems that when I have multiple accordions, such as accordion-1, accordion-2, and accordion-3, they all open simultaneously if clicked on individually. My main concern is: How can ...

javascriptcssangularjstwitter-bootstrap

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

javascripthtmlcanvasadobe-animate

posting data and redirecting fails when using an ajax button

I am encountering an issue where I click a button on a page to navigate to another page with posted data, but it is redirecting without posting anything. Both $_POST and $_SESSION variables are empty. Below is my ajax function: function ajax4(Div_Submit, ...

phphtmlajaxredirectpost

Swap out the image for a div element if the image is not found

Is there a way to accurately display an image if it's available, and use a div as a replacement if the image is not present? // How can I determine `imageExists` without encountering cross-origin issues? (imageExists) ? (<img class="avatar-img" sr ...

javascripthtmlajaxxmlhttprequestcross-domain

Polymer: Basic data binding is not functional in the second element

After dedicating 6 hours to this problem, I still can't seem to find a solution. Below is the code snippet from index.html: <flat-data-array availableModes="{{modes}}" id="dataArray"></flat-data-array> <flat-strip-view availableModes=" ...

javascripthtmldompolymerpolymer-1.0

Jquery menu block shift

I am looking to implement a timer for the submenu within my menu. The idea is to show the submenu for 3 seconds after a mouse-over event. I have already set up a function to display and hide the submenu, but I am facing an issue where the submenu shifts to ...

jqueryhtmlcss

Design a custom screensaver using jQuery that includes a timed delay feature and an alert message

I am currently working on implementing a screensaver feature for my website. Here is the breakdown of what I am trying to achieve: When detecting the onload, clicks, and touches, I want to start a timer that counts 5 seconds. If any of these events are d ...

javascriptjqueryhtml

Learn how to increase a value with each dynamically clicked button in JavaScript

Whenever I try to increment the value by clicking the like button, it seems to be increasing but not in sync with the actual button count. How can I fix this issue? index.html <div class="row"> <div class="col-md-4"> ...

javascripthtml

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

javascriptcssreactjsreact-nativebutton

Adjusting the height of a GAS iframe in WordPress with iframe-resizer: A step-by-step guide

I would like to embed an iframe of my Google Application Script Web into my WordPress site without the scroll bar. Refer to the image below for context. https://i.stack.imgur.com/7L6Tw.png I encountered an error message while attempting to use the iframe ...

javascripthtmlgoogle-apps-scriptiframeiframe-resizer