Tips for eliminating excess white space surrounding the body in Zurb Foundation

For my website, I am utilizing the Foundation framework and have encountered an issue with extra white-space surrounding the entire body (referred to as the gutter). In attempting to remove this unwanted spacing, I have tried the following approaches:

  1. *{margin:0;padding:0;}
  2. body{margin:0;padding:0;}
  3. Obtaining a customized version of Foundation with the gutter set to 0

Unfortunately, none of these methods has proven to be successful for me. Can anyone suggest how to effectively eliminate this excess white-space?

A screenshot highlighting the area with the gutter issue in red can be viewed here.

htmlcsszurb-foundation

Answer №1

This might not be a margin issue, but rather a max-width problem. By using DevTools, you may discover that your .row class has a standard max-width of 62.5rem (my site uses 72.5rem).

It's important to stick with this limitation for regular page content readability on larger screens. However, you can override it for elements that require full width.

To do so, create a class in your style sheet that overrides the default max-width and targets the specific element with enough specificity.

Another option is to avoid using the .row class on outer containers meant to span the entire page. This allows you to place rows inside, enabling features like a teal background spanning the page while keeping content aligned with grid-based content below.

For more information about customizing row width using SASS variables in the Foundation grid, check out the link here.

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

Bootstrap does not display unordered lists (<ul>) or ordered lists (<ol>)

I'm having trouble with my code that should display ordered and unordered lists. Even though I am using Bootstrap, I can't seem to get any list styling - no numbers or bullets are showing up. <ul> <li>test1</li> <li>test2 ...

htmlcsstwitter-bootstrap

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

I have a base URL which is http://www.example.com, and the file names are coming from an API stored in the dataSource array as shown below: [ { "bid": "2", "bnam": "ChickenChilli", "adds": "nsnnsnw, nnsnsnsn", "pdap": " ...

htmlangulartypescript

Variation in typefaces within indistinguishable settings

I am facing an issue with two different installations of Laravel that include Bootstrap. Both installations seem to have Montserrat on the body tag. In one installation, Montserrat is included with Bootstrap directly and does not need a declaration in th ...

csslaravelfontsbootstrap-4

Can you please provide details on the GTK4 alternative for gtk_style_context_get_property?

It seems that the gtk_style_context_get_property() function has been deprecated in gtk4: I'm having trouble locating any replacement functions in gtk4. My goal is to retrieve the border color defined by the current theme for a specific widget class a ...

cssclinuxcustom-widgetsgtk4

What about a sliding element feature?

Is there a popular slider component that many startups are using, or are these types of sliders typically built from scratch? It seems like they are everywhere on startup websites. I would appreciate it if someone could point me in the right direction with ...

javascripthtmlcssslider

Troubleshooting: Django failing to automatically populate a newly created HTML template

Currently learning Django and noticed that when I create a new HTML file in the templates folder, the minimum HTML code is not automatically filled like in the video tutorial. While I can switch to HTML language mode and use ctrl+space to choose HTML_sampl ...

pythonhtmldjangovisual-studio-code

What is the method for showcasing background images sequentially?

css code #intro { position: relative; background-attachment: fixed; background-repeat: no-repeat; background-position: center top; -webkit-background-size: cover; -moz-background-size: cover; backgr ...

javascriptjqueryhtmlcss

Having trouble with my JQuery selection

In the code below, I have assigned an id of "song-pick." $("#archive").append("<div id=\"song-pick\" data-song=\""+song.rank+"\" class=\"box small back"+counter+"\"><span>"+song.title+"</span></div>"); ...

javascriptjqueryhtml

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

Searching for a table row that corresponds to the content of a cell using Python and Selenium

If you need to retrieve the row element from an HTML table where the text in a specific cell matches the string 'Mathematik & Informatik'. Here is the structure of the HTML: <table class="views-table cols-4"> <thead> ...

pythonhtmlseleniumxpath

Deleting an element from an array stored in local storage with the help of jQuery

Summary: Developing a front-end wish list feature Tech Stack: Utilizing HTML5 (localStorage), CSS, and jQuery Key Features: Ability to add and delete items dynamically with real-time count display Challenge: Issue encountered when trying to remove added ...

javascriptjquerycsshtmllocal-storage

Expanding a div to occupy 100% width within a Material UI TableBody

I am struggling to center a CircularProgress component inside a material UI TableBody. I have attempted the following code, but the CircularProgress is not displaying at the center as expected. (Please note that only relevant code has been included) const ...

cssreactjsflexboxmaterial-ui

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

Unable to retrieve data from input field

I am facing an issue with sending textbox values from one HTML page to another. On the first page, I am trying to send the first name and last name values and I want to retrieve these values in a textbox on the second page (home.html). However, I encounter ...

javascripthtml

issue with mark.js scrolling to selected sections

Our document searching functionality utilizes mark.js to highlight text and navigate to the results. You can see an example of this in action here. If you search for "Lorem ipsum" -> the highlighting works perfectly, but the navigation jumps to fragmen ...

javascripthtmljquerymark.js

Using iframe ajax in an Android browser is essential for enhancing the user experience

My android application uses an HTML page to post data to a server and receive a downloadable attachment in response. I attempted to use the hidden iframe hack for this purpose, but it is not working as expected. Can anyone help me understand what could b ...

androidhtmlajaxiframe

Will the fonts on my website display correctly if I incorporate Google Web Fonts?

Have you checked out this amazing font selection: https://www.google.com/fonts I'm interested in using unique fonts on my website. If I incorporate Google Web Fonts into my site, will the fonts show up correctly? Will the user's browser default ...

htmlcssgoogle-font-api

The functionality of switching between two layouts using a JavaScript button is currently not functioning

My concept involves implementing a switch that alternates between displaying a bootstrap carousel and cards. Essentially, one of them will be visible when the button is pressed while the other remains invisible. Initially, I am attempting to hide my existi ...

javascripthtmlcss

Struggling to adjust the size of my background image to fit my vision using HTML and CSS

I needed a way to auto-resize an image based on the screen resolution it's being viewed on. After some searching, I came across this code that did the trick: <!DOCTYPE html> <head> <style> html,body { height: 100%; margin: 0 ...

htmlcss

The alignment of the text next to the icons is not correct

Is it necessary to use flexbox, or is there an easier way to achieve the same result? It has been a while since I last practiced and I can't seem to remember much. .sadaka-contacts p { color: #115c9b ...

htmlcssflexboxcss-grid