Adjust the alignment of images and resize them while also removing any unnecessary margins

Question

Adjust the alignment of images and resize them while also removing any unnecessary margins

I am seeking assistance on how to adjust image alignment and eliminate unwanted margins. My goal is to center align the items, however, there appears to be a margin (referred to as the orange zone) that I cannot remove.

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  width: 100%;
}

.content__row {
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.content__img {
  display: flex;
  width: 80%;
  height: 90%;
  padding: 0%;
}

.content__a {
  text-decoration: none;
  align-items: center;
}

.content__p {
  align-items: center;
  text-align: center;
  width: 80%;
  font-size: 35px;
  font-weight: 900;
  font-family: 'Ubuntu', sans-serif;
  color: rgb(39, 39, 255);
}

<div class="content">
  <div class="content__row">
    <a class="content__a" href="#">
      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">COMPILARE
        <br>
        <span class="content__span">730?</span>
      </p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">CALCOLARE
        <br>
        <span class="content__span">L'ISEE?</span>
      </p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">CALCOLARE
        <br>
        <span class="content__span">L'ISEE?</span>
      </p>
    </a>
  </div>
</div>

html css

Answer 1

Answer №1

Essentially, by setting the width of your <a> elements to 30%, you have leftover space on the right side due to the lack of justify-content property in the .content__row flexbox. To address this, consider adding

justify-content: space-between; (or around)

to your .column__row class.

Here are a few observations:

It's unclear why you're applying the flex property to your images. Transforming your <a> elements into column flexboxes could eliminate the unnecessary space between your image and <p> tags (a common issue).

Explore incorporating the object-fit: cover; attribute to your images for the ability to resize them without concerns about distortion.

Answer 2

Essentially, by setting the width of your <a> elements to 30%, you have leftover space on the right side due to the lack of justify-content property in the .content__row flexbox. To address this, consider adding

justify-content: space-between; (or around)

to your .column__row class.

Here are a few observations:

It's unclear why you're applying the flex property to your images. Transforming your <a> elements into column flexboxes could eliminate the unnecessary space between your image and <p> tags (a common issue).

Explore incorporating the object-fit: cover; attribute to your images for the ability to resize them without concerns about distortion.

Answer 3

Answer №2

Streamlined CSS by removing unnecessary elements and incorporating a few new ones. Refer to the comments in the CSS section for details.

* {
  margin: 0;
  box-sizing: border-box;
}

.content {
  display: flex;
  padding: 20px;
}

.content__row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px; /* add */
}

.content__a {
  text-decoration: none;
  flex: 1;
}

.content__img {
  height: 200px;     /* add */
  width: 100%;       /* add */
  object-fit: cover; /* add */
}

.content__p {
  text-align: center;
  font: 900 normal 1rem/1.5 Ubuntu, sans-serif;
}

<div class="content">
  <div class="content__row">
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">COMPILARE<br><span class="content__span">730?</span></p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>
    </a>
  </div>
</div>

Answer 4

Streamlined CSS by removing unnecessary elements and incorporating a few new ones. Refer to the comments in the CSS section for details.

* {
  margin: 0;
  box-sizing: border-box;
}

.content {
  display: flex;
  padding: 20px;
}

.content__row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px; /* add */
}

.content__a {
  text-decoration: none;
  flex: 1;
}

.content__img {
  height: 200px;     /* add */
  width: 100%;       /* add */
  object-fit: cover; /* add */
}

.content__p {
  text-align: center;
  font: 900 normal 1rem/1.5 Ubuntu, sans-serif;
}

<div class="content">
  <div class="content__row">
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">COMPILARE<br><span class="content__span">730?</span></p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>
    </a>
  </div>
</div>

Answer 5

Answer №3

There seems to be a CSS issue with the couple.

To fix the issue, remove width: 80%; from .content__p as it restricts the width of the paragraph tag.
If you need a full-width image, remove width: 80% from .content__img. Alternatively, if you do use width: 80%;, add margin: 0 auto; for equal spacing on both sides of the image.
I have taken out height: 90% from .content__img as it may look odd with a restricted height (optional).
Delete padding: 20px; from .content to prevent unwanted horizontal scrolling on the page.
For .content_a, include
```
display: flex; flex-direction: column; flex: 1;
```
to eliminate blank space to the right side of the three elements.

Check out the Working Fiddle below:

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* Removed padding to prevent scroll */
  /* padding: 20px; */
  width: 100%;
}

.content__row {
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.content__img {
  display: flex;
  /* Do not restrict height */
  /* height: 90%; */
  padding: 0%;
  /* Restrict width only when necessary or else comment this out */
  width: 80%;
  /* If setting a width value, apply margin: 0 auto to center-align image */
  margin: 0 auto;
}

.content__a {
  text-decoration: none;
  align-items: center;
  /* Added to eliminate blank space after 3 elements */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content__p {
  align-items: center;
  text-align: center;
  /* Do not restrict width */
  /* width: 80%; */
  font-size: 35px;
  font-weight: 900;
  font-family: 'Ubuntu', sans-serif;
  color: rgb(39, 39, 255);
}

<div class="content">
<div class="content__row">
  <a class="content__a" href="#">
    <img class="content__img" src="https://via.placeholder.com/400" alt="">
    <p class="content__p">
      COMPILARE
      <br>
      <span class="content__span">730?</span>
    </p>
  </a>
  <a class="content__a" href="#">
    <img class="content__img" src="https://via.placeholder.com/400" alt="">
    <p class="content__p">
      CALCOLARE
      <br>
      <span class="content__span">L'ISEE?</span>
    </p>
  </a>
  <a class="content__a" href="#">
    <img class="content__img" src="https://via.placeholder.com/400" alt="">
    <p class="content__p">
      CALCOLARE
      <br>
      <span class="content__span">L'ISEE?</span>
    </p>
  </ahref>
</div>

Answer 6

There seems to be a CSS issue with the couple.

To fix the issue, remove width: 80%; from .content__p as it restricts the width of the paragraph tag.
If you need a full-width image, remove width: 80% from .content__img. Alternatively, if you do use width: 80%;, add margin: 0 auto; for equal spacing on both sides of the image.
I have taken out height: 90% from .content__img as it may look odd with a restricted height (optional).
Delete padding: 20px; from .content to prevent unwanted horizontal scrolling on the page.
For .content_a, include
```
display: flex; flex-direction: column; flex: 1;
```
to eliminate blank space to the right side of the three elements.

Check out the Working Fiddle below:

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* Removed padding to prevent scroll */
  /* padding: 20px; */
  width: 100%;
}

.content__row {
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.content__img {
  display: flex;
  /* Do not restrict height */
  /* height: 90%; */
  padding: 0%;
  /* Restrict width only when necessary or else comment this out */
  width: 80%;
  /* If setting a width value, apply margin: 0 auto to center-align image */
  margin: 0 auto;
}

.content__a {
  text-decoration: none;
  align-items: center;
  /* Added to eliminate blank space after 3 elements */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content__p {
  align-items: center;
  text-align: center;
  /* Do not restrict width */
  /* width: 80%; */
  font-size: 35px;
  font-weight: 900;
  font-family: 'Ubuntu', sans-serif;
  color: rgb(39, 39, 255);
}

<div class="content">
<div class="content__row">
  <a class="content__a" href="#">
    <img class="content__img" src="https://via.placeholder.com/400" alt="">
    <p class="content__p">
      COMPILARE
      <br>
      <span class="content__span">730?</span>
    </p>
  </a>
  <a class="content__a" href="#">
    <img class="content__img" src="https://via.placeholder.com/400" alt="">
    <p class="content__p">
      CALCOLARE
      <br>
      <span class="content__span">L'ISEE?</span>
    </p>
  </a>
  <a class="content__a" href="#">
    <img class="content__img" src="https://via.placeholder.com/400" alt="">
    <p class="content__p">
      CALCOLARE
      <br>
      <span class="content__span">L'ISEE?</span>
    </p>
  </ahref>
</div>

Adjust the alignment of images and resize them while also removing any unnecessary margins

Answer №1

Answer №2

Answer №3

Similar questions

Creating a mat-grid-list using Angular Material involves adding the necessary dependencies and components

Obtaining Beverage Overall with Loop

Challenges faced when creating a dynamic HTML and CSS slider

The hover effect on sibling elements is not functioning for the <img> tag

A guide on iterating and accessing Vue data in a loop

Adding a div element with a background behind a text element using Jquery

How to display only a portion of content using UI Bootstrap collapse feature

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

Is there a way to create an attribute for a label that is connected to two text field inputs in HTML?

Text and Image Coordination

Whenever I minimize the screen, certain column text is unable to be seen within the Td element

I'm having trouble getting the Bootstrap 5 Carousel to work, even though I directly copied the code from the official website

jQuery registers the enter event, but does not proceed to trigger the enter action

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

The columns in CSS grid-template are refusing to change despite the media query code being applied and active

Maintain the aspect ratio of an image using CSS and flexbox styling

Abstract forms on the canvas are dancing in a strange and unusual rhythm

The TTF font is not showing up on the webpage when applying the @font-family property

Creating a Django template with an HTML button that points to a foreign key reference