Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS.

If anyone could provide some guidance, that would be greatly appreciated!

Here is the HTML code snippet:

  <div class="col-sm-3">
    <div class="cardearnings" style="height:89%;">
      <div class="card-body">
        <h2 class="card-title">Activity</h2>
          <div class="contents">
          <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
          <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
        </div>
      </div>
    </div>
  </div>

And here's the accompanying CSS for the image styling:

.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center right;
}

This is how it currently appears on the page:

https://i.sstatic.net/AN2Q1.png

javascripthtmlcssvue.jsvuejs2

Answer №1

To add to the previous response, we can utilize the flexbox feature of CSS to create a similar layout.

Feel free to refer to the following code snippets:



<!DOCTYPE html>
<html>
   <head>

      <!-- CSS style -->
      <style>
         .container1 {
         display: flex;
         }
         .container2 {
         display: flex;
         }
         p {
         margin-left: 10px;
         }
         img {
         margin-top: 5px;
         }
      </style>

   </head>
   <body>

      <div class="container1">
         <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
            style="width:70px; 
            height:70px;" class="image--cover">
         <p> Someone followed you </p>
      </div>

      <div class="container2">
         <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
            style="width:70px; 
            height:70px;" class="image--cover">
         <p> Me followed you </p>
      </div>

   </body>
</html>

References:

  1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Answer №2

If I understand correctly:

.card-body {
  display: grid;
  justify-items: center;
}
.contents {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
}
.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center right;
}
<div class="col-sm-3">
  <div class="cardearnings" style="height:89%;">
    <div class="card-body">
      <h2 class="card-title">Activity</h2>
      <div class="contents">
        <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
        <i>Someone followed you</i>
        <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
        <i>Me followed you</i>
      </div>
    </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

Error: The value for 'prepareStyles' property is undefined and cannot be read

Can anyone provide some guidance on this code snippet? I am struggling to understand the error message I am receiving. import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableB ...

javascriptreactjsmaterial-uienzyme

Troubleshooting problems in transferring JSON data between a React application and a Spring Boot service running locally

Running a local Springboot server, accessing it locally in the browser returns a properly formatted JSON object. However, encountering issues when trying to fetch this JSON object from a React application running on node locally. Managed to overcome CORs h ...

javascriptjsonreactjsgoogle-chrome

A guide on how to mention users in Discord.js

I attempted to get the bot to mention a member using @, but when I used message.channel.send(<@id>+"text") it showed an error message saying unexpected sign '<'. Is there a way to successfully mention members with the bot? ...

javascriptdiscorddiscord.jsping

What is the best method for displaying an HTML string within an HTML file in Angular 5?

I have declared an array in my TypeScript file like this: import {Component, OnInit} from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-foo', template: ...

javascriptangular

Sending a JavaScript variable to a Flask url_for function

There is an endpoint that requires a value in the URL and then generates content to be displayed within a specific div. I'm trying to construct the URL using url_for with a JavaScript variable, but it seems that $variable1 is being treated as a string ...

javascriptpythonflaskjinja2

Utilizing the Current URL from the address bar as a variable to link within the same page

My goal is to: Extract the current URL address from the browser bar, which will have a format like this: http://example.com/test/index.html?&dv1=1023faf2ee37cbbfa441eca0e1a36c Retrieve the lengthy ID number located at the end of the URL 1023faf2ee37c ...

javascriptjqueryhtmlurl

Modifying the width of a jQuery UI dialog from within the dialog box itself

I have designed an ASP.Net web page with a div and iFrame to display another page within it. Now, I am wondering if there is a way to change the width of the dialog from a button inside the dialog itself... Is this achievable? Thank you. ...

javascriptjqueryasp.netjquery-uijquery-dialog

Switching measurement unit to jQuery when retrieving image weight

After coming across a solution on this question, I am looking to determine the weight of an image from a file input. The solution I found displays the result in MiB (Mebibyte) unit. Is there a way to show the image weight using the same code, but in a diff ...

javascriptphpjqueryimage-processing

Changing images based on different triggers - HTML Markup with jQuery Carousel

I have a website where I'm using a plugin called CarouFredSel, available at Most of the time, it works perfectly fine. However, there are some images that cause the markup to break. I've tried troubleshooting the issue but haven't been able ...

jqueryhtmlcarousel

How to Maintain SASS Code Efficiency with Media Queries

How can I avoid repeating myself in my CSS code when using two different media queries for phones and tablets that require the same exact styling? $mobile-portrait: "only screen and (max-width: 680px)"; $tablet-portrait: "only screen and (min-device-wid ...

htmlcsssassmedia-queries

Dealing with data manipulation in the realm of javascript

In the following code snippet, I am iterating through multiple URLs and extracting data (title and content) from each of them. My objective is to store this data for later use on another page, and thus it needs to be accessible using its respective title, ...

javascriptjsonpuppeteer

Unable to specifically identify or focus on this offspring

I am attempting to target the class has-translucent-status-bar nested within another class called platform-ios To achieve this, I have used the following code: .platform-ios > .has-translucent-status-bar Unfortunately, this approach has not been succ ...

htmlcss

Getting hold of HTML elements in a div on a different page

Recently diving into the world of html/javascript, I find myself engaged in a project where I'm loading an external html page within a div. The loaded content looks like this: <div class="content" id="content"> <object ty ...

javascripthtmlelectron

PHP Arrays and HTML Form Select Elements

I am facing a challenge with a form that contains multiple rows and numerous "select" drop-down menus in each row. While I'm presenting a simplified 2x2 example here, the actual form could extend up to 5x5. Here is an outline of my HTML form: <fo ...

phphtmlarraysforms

Transitioning from pop-up modals to AngularJS JSON

I have a table with fields such as: product, lot, input1, input2. It is possible to clone a line or add a new line. The selection of the Product is based on a value from JSON data. The Lot selection initially stays empty and gets filled with sub-arrays rel ...

javascriptjqueryangularjsjson

The CSS dropdown menu is malfunctioning on Internet Explorer and Firefox

After searching for a solution and coming up empty-handed, I have decided to ask a question. The drop-down menu on my computer and other devices at home works perfectly in Chrome but not in Firefox and IE. #menu { position: absolute; left: 50%; bottom ...

htmlcssdrop-down-menu

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Running JavaScript code within views

While dealing with AngularJS, I have an index page that includes a <div ui-view></div>. When a specific URL like #/offers/new is entered, it loads a page such as new-offer.html into the ui-view. In my javascript code block within the index.htm ...

javascriptangularjs

Custom palette in Material UI design palette allows users to create

Hey there everyone! I've been working on a website using ReactJS and Material UI, starting with this cool template. One thing I'm trying to do is change the color of the TextField when it's focused. Right now it's blue, but I want it ...

javascriptreactjsmaterial-uifocustheming

Troubleshooting Next.js Mobile Freeze Issue: Unresponsive Scroll After Page Transition

Encountered a strange bug while testing my Next.js + Bootstrap demo project on mobile view. When using the burger menu to navigate to a new page on a mobile phone, attempting to scroll down causes it to stick/freeze/hang inexplicably. Despite my efforts to ...

javascriptreactjstypescriptnext.jsbootstrap-5