Designing materials involves organizing 5 items in a section, as dividing 12 by 5 results in an unattractive

Incorporating the Material Design Light library into my webpage, I have a section with 5 items that I want to evenly occupy the space:

<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp social-section">
  <a href="http://twitter.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-twitter">
    <i class="fa fa-twitter big-icon"></i>
  </a>
  <a href="http://facebook.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-facebook">
    <i class="fa fa-facebook big-icon"></i>
  </a>
  <a href="http://linkedin.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-linkedin">
    <i class="fa fa-linkedin big-icon"></i>
  </a>
  <a href="http://youtube.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-youtube">
    <i class="fa fa-youtube big-icon"></i>
  </a>
<a href="http://plus.google.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-gplus">
    <i class="fa fa-google-plus big-icon"></i>
  </a>
</section>

My goal is for these items to completely fill the section, rather than using mdl-cell--1-offset on the first item.

cssmaterial-design

Answer №1

In my search for a built-in MDL solution, I came up short. Therefore, I implemented the following CSS code within my frontpage-social-button class:

width:20%;

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

React - method for transmitting dynamically generated styles to a div element

As a newcomer to the world of React, I keep encountering an unexpected token error related to the ":". Can someone please assist me with understanding the correct syntax for including multiple styles within the Box component provided below? Additionally, h ...

javascripthtmlcssreactjs

Replace the pixel measurements with percentage values

I have a vision for creating a dynamic full-width slider using a flex-wrapper and multiple child sections. Each section spans the width of the viewport and is aligned in a row. The goal is to move the flex-wrapper by 100% margin-left every time a button ...

jquerycss

The CSS variables set within the :root section of styles.scss are not recognized as valid

Trying to implement global colors using CSS variables in my Angular 11 app. The styles.scss file contains: :root{ --primary : #0b68e8; --secondary:#ABCFFF; } .test-class{ background: var(--primary); } However, when applying this class in one ...

cssangularsasscss-variables

Conditionals in Angular 2 using Sass

Looking to apply this style with Sass or CSS: IF :host.form-control MATCHES .ng-valid[required] OR .ng-valid.required THEN :host ::ng-deep input.form-control = border-left: 5px solid #42A948; Appreciate the help! ...

cssangularsass

Setting the minimum width for Cards in Bootstrap: A How-To Guide

I'm facing an issue with Bootstrap cards. When I set a minimum width for the cards, they end up overlapping as I reduce the window width. How can I ensure that the third card moves to the next row to prevent this overlapping? https://i.sstatic.net/XA ...

csstwitter-bootstrapsassbootstrap-4

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow To view my code, please visit: Codepen .next { position:absolut ...

javascripthtmlcss

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

How can I locate the CSS selector for a text message?

Looking for a CSS selector to target the message "Congratulations! displayed after successfully filling out a registration form with Selenium Web driver. Need to assert the text "Congratulations, Your email has been verified". Here is the HTML code: <d ...

cssseleniumselenium-webdriver

How can you implement a transform transition toggle when a user clicks on an element

Check out this CodePen example for a cool overlay animation: https://codepen.io/pen/MoWLrZ Experience the unique animation of two overlays as you click for the first time. However, on the second click, watch as both overlays seamlessly return to their ori ...

jqueryhtmlcssanimation

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet

Align three divs vertically within one div, all floated to achieve the desired layout

Can someone help me align three divs vertically within a container div? The challenge is that all three divs inside the container are floated - one on the right, one in the center, and one on the left to create a navbar. I've seen the navbars in Boot ...

htmlcsstwitter-bootstrapbootstrap-5

Ensuring maximum length validation on input

I am having an issue with the function "checkNumbers()". I am attempting to validate if my input does not exceed 10 numbers; while "isAllowedSymbol()" is functioning correctly, the other one is not. What could be causing this problem? function isAllowe ...

javascripthtmlcss

What is the best way to position text at the bottom of an image using CSS?

Utilizing the jQuery Caption Plugin to showcase the image alt text when hovering over an image. Currently, the text is displaying at the top but I would like it to show at the bottom. Any suggestions on how to remedy this? Desired Outcome: Check out the ...

jqueryhtmlcssimage

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

csstwitter-bootstrapnavbar

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening? I ne ...

javascriptjqueryhtmlcss

Expanding Images for Optimal Display in Responsive Design

I have a collection of large images in various sizes that I need to display without any stretching inside a container with set height. The challenge is to make the image fit perfectly within the container without distorting its proportions. I must achieve ...

htmlcssresponsive-design

What is the best approach to effectively manage right-to-left text-input fields?

I have been working on a project involving a multilingual layout. One concern that has arisen is: What is the proper way to handle text-input in this scenario? To better explain my issue, I created a JSFiddle. If I simply add the attribute dir="rtl", ...

htmlcsshebrewbidi

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml

Issue with Laravel Blade template not linking CSS files in a subfolder

I am currently facing an issue where the CSS file path in my code is incorrect. The code I have is: {{HTML::style('css/bootstrap/bootstrap.min.css')}} When rendered in the source code, it displays as: http://www.view.local/laravel/css/bootstra ...

htmlcsslaravellaravel-4