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:

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

What is the best way to search for items using only a portion of a phone number or typing a name in any case (uppercase, lowercase) and still get accurate results?

let contacts = [ { name: 'John', phone: 987654 }, { name: 'Sara', phone: 654321 } ] I am developing a contact manager app with various functions to manage contacts. Add new contac ...

javascriptnode.jsnpmweb-frontend

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

What is the best way to access event.target as an object in Angular 2?

Apologies for my limited English proficiency. . I am trying to write code that will call myFunction() when the user clicks anywhere except on an element with the class .do-not-click-here. Here is the code I have written: document.addEventListener(' ...

javascriptangulartypescript

verification tool for a less file's syntax

Searching for a tool to validate a specific less file at the syntax level. The issue lies in the validator not recognizing dependencies or detecting declared mixins. Many existing less processors do not work due to missing dependencies that cannot be prov ...

javascriptnode.jsnpmlessantlr

Why do the back button and custom scroller behave differently on two different webpages?

I’ve added the malihu custom scroller to my website, but it’s behaving differently compared to how it works in the demo. I can’t seem to figure out what's causing this discrepancy. For reference: Demo: check here Website: visit here The fo ...

htmljquery-pluginsback-buttonscroller

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

javascriptjquerycssjquery-animate

Utilizing Bootstrap Modal to trigger an Action Result function when a button is clicked

I could use some assistance. In my current setup, I have a file picker that loads a file into a specific table in my database. When the user clicks a button, a bootstrap modal pops up to ask if they are uploading more files. This is how it looks in my vi ...

javascriptjqueryasp.net-mvctwitter-bootstrapmodal-dialog

With Ionic, you can use one single codebase for both iPad and iPhone

I currently have a complete app developed using ionic and angularjs that is functioning well on iPads and Android devices. Now we are looking to launch it for iPhones and Android smartphones with some design modifications. Is there a method to achieve th ...

javascriptangularjsionic-frameworkhybrid-mobile-app

I am unable to retrieve the value stored within a function

Below is the code snippet : let namesList = ref([]); const GetFormData = (payload) => { return new Promise((resolve, reject) => { api .get("api.php", { params: { search: payload } }) .then((response) => { data. ...

javascriptvue.jsaxios

Unforeseen issues arise when using material ui's Select component in conjunction with 'redux-form'

I am encountering an issue with a 'redux form' that includes a Select component from the latest material-ui-next. import { TextField } from 'material-ui'; <Field name="name" component={TextField} select > <MenuIte ...

javascriptreactjsdrop-down-menumaterial-uiredux-form

Error: Unable to access the property 'map' as it is undefined | React, Redux

I'm encountering an issue that says: TypeError: Cannot read property 'map' of undefined. This error is related to trying to map over the array (posts) when it's empty: const postsList = posts.map((postList, i) => { Here is my actio ...

javascriptreactjsredux

Element sticking on scroll down and sticking on scroll up movements

I am currently working on a sticky sidebar that catches and stays fixed at a certain scroll point using JavaScript. However, I am facing an issue where I need the sidebar to catch when scrolling back up and not go further than its initial starting point. ...

javascriptjqueryhtmlcss

Troubleshooting Problems with Ruby Arrays, JavaScript, and JSON

I am facing a challenge with rendering a highcharts plugin in my rails application. I suspect it could be related to the sql queries fetching data from the database and converting them into a ruby array that the javascript code fails to interpret correctly ...

javascriptjqueryruby-on-railsajaxjson

Display results in a Web application using Google Apps Script

function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...

javascripthtmlwebgoogle-apps-scriptgoogle-apps

The ExpressJS middleware is executing twice

I'm experiencing an issue with the following code snippet. When I include the middleware logger() as the first argument to app.use(), it is called twice. However, when I place it as the second argument, it doesn't get executed at all. Can anyone ...

javascriptnode.jsexpressservermiddleware

Modify the color of the menu in OpenCart 1.5.6.4 to give it a fresh

In the default theme of OpenCart 1.5.6.4, I am looking to change the background color of the dropdown menu which is currently defined by the background image 'menu.png' to a custom hex value. The CSS code for this section is shown below: #menu & ...

htmlcssopencart

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements

I've been having some trouble trying to override a predefined property in lit-element. Using Typescript, I set the value of the property using a decorator in the custom element, but when I attempt to override it by setting a different attribute in the ...

javascripttypescriptpolymerlit-elementlit-html

What is the preferred workflow for client-side modules: (Browserify + npm + gulp) or (RequireJS + Bower + gulp)?

As I delve into various client-side Javascript modules workflows for my current Node.JS Express project, I find myself torn between Browserify + npm + gulp and RequireJS + Bower + gulp. While I lean towards CommonJS due to its syntax, the idea of sharing ...

javascriptnode.jsbowerbrowserifycommonjs

Limit access to route in ExpressJS only to internal redirects

I'm managing an ExpressJS application that includes specific routes which I intend to only function when redirected to from my code, rather than input directly into the URL. Essentially, if a user attempts to enter "myapp.com/url" it should not be ac ...

javascriptnode.jsexpressroutes

Receive a notification for failed login attempts using Spring Boot and JavaScript

Seeking assistance with determining the success of a login using a SpringBoot Controller. Encountering an issue where unsuccessful logins result in a page displaying HTML -> false, indicating that JavaScript may not be running properly (e.g., failure: f ...

javascriptajaxspring-bootpostcontroller