Image with responsive div buttons

I am trying to add a set of buttons on each image in my masonry image gallery, but I'm facing issues with responsiveness.

Whenever I resize the screen, some of the buttons disappear instead of adjusting their size and position accordingly.

I want the buttons to scale down proportionally as I decrease the screen size, ensuring that all buttons remain visible within the div container.

Here is the HTML code snippet:

 <ul class="mdc-image-list mdc-image-list--masonry masonry-image-list second">
      <li class="mdc-image-list__item" *ngFor="let image of list; let  i = index;">
          <img [src]="image" class="mdc-image-list__image">
        <div class="mdc-image-list--with-text-protection">
          <div class="mdc-image-list__supporting">
          </div>
        </div>
      </li>
    </ul>
htmlcssangulartypescriptmasonry

Answer №1

The primary challenge at hand is organizing the icons side by side, without relying on margin-left or float: left;. Achieve this by utilizing display: flex; and justify-content: space-between; within the parent class (.mdc-image-list__label). This arrangement ensures each item appears adjacent to one another and the space-between directive guarantees uniform spacing between elements. Further insights on flexbox can be found at MDN.

Check out the revised version on StackBlitz for the adjustments.

.Pin{
  margin-top: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.Inbox{
  width: 30px;
  height: 30px;
  margin-top: 8px;
  cursor: pointer;
}

.Chat{
  width: 30px;
  margin-top: 10px;
  height: 27px;
  cursor: pointer;
}

.Task{
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-top: 8px;
}

// Adjusting this class
.mdc-image-list__label {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box; // To ensure proper encapsulation of padding styling
}

Answer №2

Assigning a unique class to each image is unnecessary, therefore you can eliminate it along with its related css. The following css code will resolve your problem, providing a more generic and effective solution.

.mdc-image-list__supporting a {
  width: 25%;
  display: inline-block;
  text-align: center;
}

.mdc-image-list__supporting a img {
   width: 25px;
   height: 25px;
   cursor: pointer;
   margin: 10px 0;
}

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

Resize the image to fit the dimensions of a div, but unfortunately, the overflow: hidden property is not effective in this

I'm looking to set up an image gallery using the Bootstrap grid layout. The gallery should span 100% width and consist of two grids in a row, each containing one picture. I want the height of the second picture to match that of the first, with croppin ...

htmlcssbootstrap-4

Determine the aspect ratio with a constant adjustment using CSS/SCSS

I am trying to adjust the aspect ratio of a responsive div to create a square shape with an offset. I want the height to be equal to the width plus the specified offset. Here is an example of what I am attempting: .div { width: 100%; aspect-ratio: 1 / ...

htmlcsssassresponsive-designcore-web-vitals

Utilizing props in styled components with Emotion-js and Typescript is not feasible

Check out this simple React component I created: import React, { ReactChild, ElementType } from 'react' import styled from '@emotion/styled' type WrapperPropsType = { size?: SizeType } type ButtonPropsType = { as?: ElementType< ...

reactjstypescriptstyled-componentsemotionemotion-js

Creating HTML or PHP pages using jQuery

Is it possible to generate a file using jQuery? I am creating a website maker. On the left side, I have a list of elements such as: ---------------------------------------------------------------- Elements Attri ...

phpjavascriptjqueryhtml

Problem with dynamic page routes in Next.js (and using TypeScript)

Hi everyone, I'm currently learning next.js and I'm facing an issue while trying to set up a route like **pages/perfil/[name]** The problem I'm encountering is that the data fetched from an API call for this page is based on an id, but I wa ...

javascripttypescriptnext.js

What could be causing the malfunction of Bootstrap Multiselect functionality?

I have been attempting to set up Bootstrap Multiselect but it simply refuses to work. Despite trying various solutions, I am unable to pinpoint the issue. My index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

javascripthtmljquerytwitter-bootstrap

Stop specific characters from being input into a text field

My goal is to restrict the characters allowed in a text box to the following: A to Z in both upper and lower case, Ñ and ñ, and space. I have a function that runs onkeyup: FieldOnKeyUp(el) { !(/^[A-zÑñ-\s]*$/i).test(el.value)?el.value = el.value ...

javascripthtmlcss

Storing application state using rxjs observables in an Angular application

I'm looking to implement user status storage in an Angular service. Here is the code snippet I currently have: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() expo ...

angulartypescriptrxjs

Tips for implementing collapsible mobile navigation in Django with the help of Materialize CSS

I'm facing some issues with implementing a responsive navbar that collapses into a 'hamburger bar' on mobile devices and in split view. I have managed to display the hamburger bar, but when I click on it nothing happens. Here's my curre ...

javascriptpythonhtmldjangomaterialize

Creating intricate structures using TypeScript recursively

When working with Angular and TypeScript, we have the power of generics and Compile-goodness to ensure type-safety. However, when using services like HTTP-Service, we only receive parsed JSON instead of specific objects. Below are some generic methods that ...

javascriptjsontypescriptgenerics

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

Can CSS be used to horizontally align individual characters by adjusting letter-spacing?

When I apply the CSS rule letter-spacing: 16px;, I observe that the characters are aligned to the left within their designated space, causing the cursor to jump towards the right as if an additional space was added after each character. I am wondering if ...

css

What is causing the Bootstrap 5 navbar to not collapse?

Struggling to compile Bootstrap 5 with sass, I have a feeling that I might be missing some important scss files. When I added the <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7 ...

htmlcsstwitter-bootstrapsassbootstrap-5

What to do when encountering error TS2339: Property 'tz' is not found on type 'Moment'?

Within my Rails application, I have developed a frontend app utilizing angular. In this setup, I am incorporating both moment and moment-timezone as shown below: "moment": "^2.22.2", "moment-timezone": "^0.5.23", Fo ...

ruby-on-railsangulardatetimemomentjsmoment-timezone

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

javascripthtmlcontenteditable

React Material Select: The error is caused by the property 'renderValue' with an expected type, as declared within the 'IntrinsicAttributes & SelectProps' type

Encountering an error with React Material Select, specifically on the Render Value function. How can I resolve this issue while using TypeScript? What should be added to the renderValue line? Error: Type '(selected: Array<number>) => string& ...

reactjstypescriptmaterial-ui

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss

A horizontal line will separate the title both before and after

Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen. My current code s ...

htmlcssbootstrap-5

Error in Angular Protractor e2e test due to iteration function on mat-radio-group innerText

clickOnQuestionsOption(optionName) { const radioButtonList = $$('mat-radio-group > mat-radio-button'); const selected_btn = radioButtonList.filter(elem => { return elem.getText().then(text => { console.log(tex ...

angularprotractorradio-group

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

htmlcsswidthhtml-table