Eliminate the excess space at the bottom of rows in Materialize CSS

Having difficulty adjusting the padding between two rows in materializecss

Troubles with Padding

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

Seeking to eliminate the bottom padding. Managed to remove left and right padding with the following code:

<div class="col s12 m5 white no-padding">

    <div class="row center-align white"><a href="acercade.html"><img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img"></a></div>
    <div class="row center-align white"><a href="transparencia.html"><img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img"></a></div>

</div>

However, it did not impact the top or bottom padding.

cssmaterial-designmaterialize

Answer №1

Create a unique CSS class 

.no-padding-bottom {padding-bottom:0px !important}

Apply the class to the specific div where you want to eliminate padding 

<div class="col s12 m5 white no-padding no-padding-bottom">

<div class="row center-align white"><a href="acercade.html">
  <img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img"></a>
</div>
<div class="row center-align white"><a href="transparencia.html">
  <img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img"></a>
</div>

</div>

Remember, the important tag is necessary!

Answer №2

After adding a CSS class with the rule height: 150px !important;, I saw it make the desired changes:

<div class="white col s12 m4 l2 no-padding">
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img image-fit"></a></div>
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img image-fit"></a></div>
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-03.jpg" class="responsive-img image-fit"></a></div>


.fix-margin {
height: 150px !important;

}

Just a reminder, this adjustment needs to be applied within the div class excluding 'row' and inside the <a href=...>

Answer №3

.column {
    padding-bottom: 0 !important;
}

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

The container is not adjusting to the screen size correctly and the flex-direction: row is not functioning as

Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me. No matter what I try, I can't seem to get this container to take up the whole screen width. Variou ...

htmlcssangularflexbox

Changes in browser size will not affect the height

Is there a way to smoothly change the height of the navigation bar when resizing the browser? Currently, it snaps to the new height when the width goes below or above 1000px. Any suggestions? nav.cust-navbar { -webkit-transition: height 2s; tran ...

htmlcssmedia-queries

A guide to correcting alignment issues on a flex box containing both images and text

I am encountering a problem with my flexbox setup. It contains multiple products with images and text, but the issue arises when a product has more than one line of text causing the image to be slightly raised compared to others. Any suggestions on how to ...

htmlcssflexbox

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...

javascriptjquerycssxhtml

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

javascripthtmlcssangularjs

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

htmlcsscss-float

the div background is limited to the exact size of the text, not filling the entire

Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...

javascripthtmlcssreactjsbackground-image

The placement of text appears to be incorrect when applying the float:left property in CSS

My issue is that I want #text1 to display on the right side of #video1, and #text2 to be positioned next to #video2. However, currently #text2 is also appearing beside #video1. Can someone please explain why this is happening and provide a solution to fi ...

css

Activate an iframe upon changing the media query

I am currently working on a webpage where I have included an image within an iframe. I am looking to change the content displayed inside the iframe based on different media query breakpoints. For instance, if the viewport has a minimum width of 900px, I ...

htmlcssiframe

Customize Color of Bootstrap Tooltips

Is there a way to customize the appearance of BootStrap tooltips by changing the color and aligning the text to the left? I've tried various CSS modifications from different posts, but none seem to work. Any idea on how to alter the CSS of the tooltip ...

htmlcssbootstrap-4

IE6 is not displaying the tag styles correctly

My website has a section that shows two links next to each other. While it's displaying correctly on most browsers, it seems to have issues specifically in IE6. You can view the issue on this fiddle. Can anyone shed some light on why this is happenin ...

htmlcssinternet-explorer-6

Presentation Slider (HTML, CSS, JavaScript)

Embarking on my journey of creating webpages, I am eager to replicate the Windows 10 start UI and its browser animations. However, my lack of JavaScript knowledge presents a challenge. Any help in reviewing my code for potential issues would be greatly app ...

javascripthtmlcss

The Slide Out Menu functioned properly in HTML, but it seems to be malfunctioning when implemented in PHP

I recently implemented a slide-in and out menu with a hamburger icon to open it and an X icon to close it. The functionality was perfect until I integrated it into PHP and WordPress. Initially, I placed the script in the header section before the meta tags ...

javascriptphphtmlcsswordpress

What causes the bootstrap grid system to deviate from the intended column sizes?

Here is the alignment I am aiming for with the Phone and Extension fields in the form: https://i.sstatic.net/JRmDU.png This is the code snippet I have written for the Phone and Extension row: <div class="row form-group"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Influence the behavior of surrounding elements as we move our cursor over them

I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...

javascriptjqueryhtmlcsshover

The picture does not occupy the entire page

Here is a simplified version of my HTML and CSS: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } *{margin:0;padding:0;}/*added as requested*/ .background-image { background-im ...

htmlcss

Adjust the height and eliminate gaps between rotated divisions

I'm currently working on a floating menu that includes several links. I've successfully applied a CSS style to rotate the menu vertically (-90deg), but I'm facing an issue with the height being greater than desired. How can I reduce the heig ...

htmlcss

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

javascriptjqueryhtmlcss

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

jqueryhtmlcss

What is the best way to implement this design using CSS or JavaScript?

I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it. ...

javascripthtmljquerycssvue.js