What steps do I need to take to ensure that my text and images are positioned in the same way as the reference image provided in the link

Can anyone help me align text and images to resemble this example:

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

Currently, it is displaying like this:

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

Here is the HTML and CSS I have used:

:root {
  font-size: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
------------------- (content abbreviated for brevity) ------------------------
.gallery-item-comments {
  margin-right: 2.2rem;
}

.gallery-item-type {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2.5rem;
  text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, .1);
}

I have tried various solutions but still facing issues with the layout, especially the overlay for likes and comments. Any suggestions?

htmlcssimagealignmentmultiple-columns

Answer №1

To enhance the layout of your website, consider utilizing CSS-grid. By adding the grid display to the parent element and specifying the number of columns for each row using the grid-template-columns property.

Take a look at this sample:

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.title {
  font-size: 2rem;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.grid div {
  width: 100px;
  height: 100px;
  background: skyblue;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}
<div class="title">Star Wars</div>

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</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

Arrange data into columns on a website

In my project, I'm exploring the challenge of creating a square 2 x 2 grid alongside a rectangular column on the right-hand side. While attempting to implement a grid system for the 2 x 2 layout, I encountered issues with the alignment of the rectang ...

htmlcsscss-grid

Issues have been observed with the keyframe animation involving a JavaScript timer, specifically in the rotation of the outer circle around the inner circle

I seem to be encountering an issue with an animation. My goal is to have three arrows in a circle that rotate around an inner circle and pause every 3 seconds for another 3 seconds before continuing to rotate. However, instead of rotating smoothly, the ani ...

javascripthtmljquerycss

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

Is there an advantage to pre-rendering a circle on an HTML5 canvas for improved performance?

Is it more efficient to pre-render graphics for a basic shape like a circle on an off-screen canvas? Would there be noticeable improvements in rendering performance when dealing with 100 circles at game-like framerates? What about 50 circles or just 25? ...

htmlcanvashtml5-canvasgeometryprerender

What is the best way to bring in an external webpage using Jquery and Custom variables into an Iframe?

Is it possible to use JQuery to load a page into an iframe? I have a specific page that generates a custom printable PDF and I want it to be loaded into an iframe for user convenience. Since I utilize jQuery to fetch all the necessary variables, I cannot ...

javascriptjqueryhtmliframe

php executing javascript - error

I have a question regarding my PHP file code: echo '<script type="text/javascript">'; echo '<audio id="player" src="../cdh/ba1.mp3"></audio>'; echo '<a onclick="document.getElementById( ...

javascriptphphtmlcss

Can someone explain the significance of this CSS code (specifically regarding font-size division)?

Forgive me, but I'm struggling to come up with a more suitable title for my query. I've come across this piece of code font: 9pt/18px Tahoma; Can anyone shed some light on what it signifies? ...

css

Ways to conceal sidebar after user logs out and reveal sidebar upon user's successful login?

Currently, I am utilizing the Dashgum bootstrap template obtained from Gridgum for a specific assignment. The task involves displaying the side navbar for logged-in users persistently, even after they have closed the site, and hiding the side navbar comple ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

How to select text based on its color property using Watir in Ruby

I'm having trouble clicking on a specific element within a table. There are multiple elements with the same class <span class="price">, but I need to click on one that has a color property of color:#555. I attempted a few different methods witho ...

cssrubywatir

Exploring Checkboxes in Hypertext Markup Language

Can anyone advise on the proper HTML input attribute to limit user selection in a list of checkboxes? Specifically, I want users to select no more than three out of five checkboxes without using radio buttons. Please provide solutions using only HTML and n ...

htmlinputattributes

Can you explain the variance between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS?

Can someone explain the difference between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS? When I tested them separately in my code, they seemed to have the same outcome. @media and screen (max-width: 1000px) { .grid ...

htmlcssmedia-queries

What is the best way to retrieve the value of a JavaScript variable and display it within an HTML label tag

In my JavaScript code, I'm attempting to retrieve location coordinates using the onchange event and then display those coordinates in a label. I've tried alerting the coordinates successfully, but I'm struggling to update the label using doc ...

javascripthtml

Could the difficulty in clicking the first entry in Firefox be a bug?

Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...

htmlcssfirefoxcss-float

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surpr ...

javascripthtmlcss

Using Selenium WebDriver to locate elements by their XPath within a WebElement

I am facing an issue with locating an element in my code using the following snippet: elements = driver.find_elements_by_xpath("//div[@class='Display']") After successfully finding the elements, I want to access the second "Display" element and ...

pythonhtmlfindselenium-webdriver

smooth upward scrolling and superimposed elements

After exploring the question posed in this thread, I am puzzled as to why setting the slider's scroll direction to vertical does not result in smooth up and down scrolling. Could this issue be related to slick itself, or perhaps the accompanying CSS c ...

jquerycssslick.js

Adjusting the spacing around the title of a post when the text wraps

This website has some great resources, check it out! In the right sidebar, there seems to be an issue with the CSS when the h4 heading wraps onto two lines. The margin and padding at the bottom of the heading are not spacing properly. I've tried adju ...

csstitleword-wrap

Creating a Dropdown Selection Menu Dynamically with jQuery and SQL Query结果

I have a website that provides information from a database based on user-set parameters. Currently, the SQL Statement is loaded from a file to populate a dropdown menu with options. The HTML code used for this process is displayed below: while($rec = $con ...

phpjqueryhtml

html2canvas bottom margin

I coded this in react function download(element) { html2canvas(element).then((canvas) => { window.open(canvas.toDataURL('image/png')); }); } return ( <div className='box' onClick={( ...

htmlcsscanvashtml2canvas

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss