Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there a CSS solution for this? I have tried various background-position options without success.

https://i.stack.imgur.com/4D7O8.png

https://i.stack.imgur.com/JVr5z.png

html {font-family:Verdana, sans-serif; }
        a {text-decoration:none;  color: #fff; font-size: 28px;}

        .head {display:flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: space-between;
          justify-content: center;
          padding: 5rem 0rem 0rem 0rem;
          flex-grow: 1; 
          flex-basis: 10%;
        }

        .items {width: 20%;
          margin:1rem; 
          -webkit-border-radius: 6;
          -moz-border-radius: 6;
          border-radius: 6px;
          color: #ffffff;
          padding: 10px 10px 10px 10px;
          text-decoration: none;
          text-align:center;
          float:left;

          font-size:30px;
          font-weight:100;
        }
  
        .items.cli {
          /* Background style */
        }
        .items.lab {
          /* Background style */
        }
        .items.cat {
          /* Background style */
        }


        .items.icon.cli span{
          /* Icon positioning */
        }
        .items.icon.labo span{
          /* Icon positioning */
        }
        .items.icon.cata span{
          /* Icon positioning */
        }

        .itemscabecera a {
          margin: 0px; 
          display: block; 
          width: 100%; 
          height: 100%;
        }
      
<section class="head">

<div class="items cli icon cli">
<a href="#"><span>Goodtimes</span></a></div>

<div class="items lab icon labo"><a href="#"><span>Wintersnow</span></a></div>

<div class="items cat icon cata"><a href="#">
<span>Spring is here</span></a></div>

</section>

htmlcss

Answer №1

If you want to make things easier, consider adding the icons directly into your item div as actual image elements rather than backgrounds. By doing so, you can avoid text overflowing from your container when using % widths with fixed font sizes.

html {font-family:Verdana, sans-serif; }
a {text-decoration:none;  color: #fff; font-size: 28px;}

.head {display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
padding: 5rem 0rem 0rem 0rem;
flex-grow: 1; flex-basis: 10%;}

.items {width: 20%;
margin:1rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 10px 10px 10px 10px;
text-decoration: none;
text-align:center;
float:left;

font-size:30px;
font-weight:100;
}
  
.items.cli {
background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#3498db', EndColorStr='#2980b9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#3498db', EndColorStr='#2980b9')";
}
.items.lab {
background: #5669ce;
  background-image: -webkit-linear-gradient(top, #5669ce, #3848a1);
  background-image: -moz-linear-gradient(top, #5669ce, #3848a1);
  background-image: -ms-linear-gradient(top, #5669ce, #3848a1);
  background-image: -o-linear-gradient(top, #5669ce, #3848a1);
  background-image: linear-gradient(to bottom, #5669ce, #3848a1);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#5669ce', EndColorStr='#3848a1');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#5669ce', EndColorStr='#3848a1')";
}
.items.cat {
background: #46b76b;
  background-image: -webkit-linear-gradient(top, #61a778, #2f7f49);
  background-image: -moz-linear-gradient(top, #61a778, #2f7f49);
  background-image: -ms-linear-gradient(top, #61a778, #2f7f49);
  background-image: -o-linear-gradient(top, #61a778, #2f7f49);
  background-image: linear-gradient(to bottom, #61a778, #2f7f49);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#61a778', EndColorStr='#2f7f49');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#61a778', EndColorStr='#2f7f49')";
}


.items.icon.cli span{
padding-right: 40px;
}
.items.icon.labo span{
padding-right: 40px;
}
.items.icon.cata span{
padding-right:50px;
}

.itemscabecera a {margin: 0px; display: block; width: 100%; height: 100%;}
<section class="head">

<div class="items cli icon cli">
<a href="#"><span>Goodtimes</span></a>
<img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>

<div class="items lab icon labo"><a href="#"><span>Wintersnow</span></a><img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>

<div class="items cat icon cata"><a href="#">
<span>Spring is here</span></a><img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>

</section>

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

How can you retrieve the component's state from a higher level without relying on useContext?

I have a question regarding creating expanding flex cards. I found an example on Codepen that showcases what I'd like to achieve: https://codepen.io/z-/pen/OBPJKK In my code, I have a component called HomeButtons that generates these flex cards. With ...

javascriptcssreactjsuser-interface

Using PHP, eliminate all hyperlinks from the DOM HTML

I have a string called $processhtml that contains some HTML. My goal is to remove all link tags and their contents from the HTML using PHP. For example: "This is some text with <a href="#">link</a>" should become: "This is some text with" ...

phphtmldomhtml-parsingdomdocument

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...

javascripthtmlsymfonypdfpdf-generation

Avoid automatic semicolon insertion in Visual Studio Code

Currently, I am utilizing Visual Studio Code for my coding tasks. I specifically do not prefer the auto insertion of semicolons after CSS properties by VS Code. However, it keeps providing me with an autocomplete option that I find undesirable. Is there a ...

cssvisual-studio-codeautocomplete

How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily? Additionally, is there a w ...

htmlcssflexboxfrontend

Arranging Data in an HTML Table Using TableSorter

I have been trying to incorporate sortable columns into my HTML table and decided to experiment with the jquery tablesorter. I have followed the syntax below, but for some reason, my table is not allowing me to sort. Can you help me understand why? &l ...

phpjqueryhtmltablesorter

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

javascriptjqueryhtmlcsshtml5-canvas

What is the best way to center all items in a vertical list of text?

Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties lik ...

htmlcssangular

Firefox experiencing glitchy rotation in CSS animations

I attempted to create a rotating div using a simple code snippet: <!DOCTYPE html> <html> <head> <style> .spinner { width: 100px; height: 100px; margin: auto; border-radius: 50%; border-bottom: 1px solid #f00; animation ...

htmlcss

The footer has a wandering nature, constantly moving around as the wrapper mysteriously vanishes

I understand that this question has been asked multiple times before, but I am struggling to get it right! My goal is to keep the footer at the bottom of the page, but it seems to be acting strangely. Here is my HTML: <!DOCTYPE HTML> <html& ...

htmlcssfooterwrapper

Website layout looking unique due to pixel width adaptation from standard width

I'm currently working on a website with full width design. On my computer, the website displays as full width, but on other computers it shows extra space on the sides. How can I ensure that this website is truly full width? .wrapper_boxed { wid ...

htmlcss

What is the best way to arrange cards in a specific order with breaks in between each flip

I am currently working on creating flip cards using HTML and CSS. I have successfully implemented the hover effect which flips the cards when hovered over. Now, my goal is to make the cards automatically flip one after the other at specific time intervals ...

javascripthtmlcss

Bootstrap's ability to display panels of equal height across multiple rows is a game

Just started using Bootstrap 4 after being familiar with Foundation for years. In Foundation, equalizer was a tool to ensure divs had the same height, which would be applied to all divs within a container. I understand that Bootstrap uses Flex, but I&apos ...

csstwitter-bootstrapflexbox

Customizing ExtJS 4's CSS reset specifically for tailored HTML inside components

I am currently in the process of upgrading an existing application from Ext 3.x to 4. I have successfully enabled Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application. However, I am now facing a new issue. ...

cssextjsextjs4overridingcss-reset

Using the <blink> tag on Internet Explorer

Unfortunately, Internet Explorer does not support the <blink> tag or the text-decoration:blink; style in CSS. Are there any alternative methods for creating blinking text in IE? ...

htmlcssinternet-explorer

Bootstrap is unable to function properly without jQuery, throwing an error message that states: "Bootstrap's JavaScript

Attempting to create a Bootstrap interface for a program. Added jQuery 1.11.0 to the <head> tag, however upon launching the web page in a browser, jQuery throws an error: Uncaught Error: Bootstrap's JavaScript requires jQuery Various attempts ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

I've noticed that tailwindcss is causing issues with some of the styles in my angular project

Recently, I integrated tailwindcss 2.0.4 into my angular 11.2.6 project. After completing the installation and adding necessary imports, the appearance of the page had changed. Take this button for instance: Prior to integrating tailwindcss, the button ...

cssangulartailwind-css

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

cssscrolloverflow

I currently have some code for a toggle button and a collapse feature, but I'm struggling to integrate the two

I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/e ...

htmlcss

Building a loading spinner component in a react-native project

I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading sp ...

javascriptcssreactjsnode.jsreact-native