Foundation's inner-margin for columns

I need some help with adjusting the layout of a row in two columns. My goal is to have the columns span the full width of the row with a margin between them to maintain alignment with the surrounding rows.

The default settings are not ideal as they add margins on both sides of the columns, causing misalignment with the rest of the rows. I discovered the "collapse" class which removes the default margins, but now I need to find a way to still have a margin between the columns.

I could create my own classes and make changes to the markup, but I'm wondering if Foundation has a built-in solution for this issue.

Any advice or best practices for handling this situation would be greatly appreciated. I have included an image to illustrate what I'm trying to achieve in my design.

Thank you!

csszurb-foundation

Answer №1

https://gist.github.com/slawaEremin/7993669

If my understanding is correct, you are looking to insert a block within columns.

The key issue here is that you must always enclose your content within .row and *-12 when dealing with a single column:

Here is an example:

<div class="row">
  <div class="small-12 columns">
     Insert content here
  </div>
</div>

<div class="row">
  <div class="small-6 columns">
     Insert content here
  </div>
  <div class="small-6 columns">
      Insert content here
  </div>
</div>

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

Header stabilization on scroll

On my webpage, I have a table header positioned in the middle of the page. However, due to the length of the page, I am looking for a way to make the header stay fixed at the top of the browser as the user scrolls down. My query is: Is there a method to k ...

javascriptjqueryhtmlcss

Connect PHP code to an HTML document

Recently, I created an entry form login page saved as a .php file which displays content in html and css. The page showcases various elements followed by a login form with two fields: Username, Password, and a 'Log in' button. Additionally, I ha ...

phphtmlcssxampp

Leveraging the X-Send module for efficiently delivering css, javascript, and image files

I am in the process of setting up a file server that currently serves downloadable files such as .doc and .zip perfectly using X-Send. Is it also possible to use X-Send for serving text-based (css/javascript) or image files? I believe this method is quite ...

phpcssfileserverx-sendfile

Tips for creating a responsive and centered scrollable horizontal gallery in Bootstrap, starting with the first of three images

Currently working on my portfolio and have incorporated a horizontally scrolling gallery featuring 3 macbook screenshots of my personal projects. My bootstrap skills are still developing, so any assistance would be greatly appreciated. Primarily, I am aim ...

htmlcsstwitter-bootstrapimage-gallery

What is the best way to switch text color when the background changes?

Is there a way to dynamically change the color of a text logo to make it readable over differently colored backgrounds, such as on a slider or scroll down effect? While one approach could involve finding the dominant image color, this may be slow and ineff ...

javascriptjqueryhtmlcss

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

Can you tell me the standard font size in Internet Explorer 9?

After examining this particular website, I found the default styling used by IE 9. The body selector in particular appears as follows: body { display: block; margin: 8px; zoom: 1; } I would have expected a font-size declaration in this code, but su ...

htmlcssinternet-explorerinternet-explorer-9

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

htmlcsstextbackgroundelement

Designing a dynamic hamburger menu featuring multiple levels of buttons that open up additional layers of options

I'm trying to implement an animated hamburger menu with expandable buttons in the next level. While I know my code is far from achieving that, here's my progress so far: https://jsfiddle.net/TheBB23/hnsjym9u/ This code was borrowed from a webs ...

javascriptjqueryhtmlcsshamburger-menu

Show small information box when hovering over custom toggle button

I have developed a unique custom toggle switch feature When I hover my mouse over the switch, it should display a tooltip message as YES if the switch is in the ON position and NO if it's in the OFF position. Is there a way to implement this functio ...

htmljquerycss

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

The CSS :first-child selector appears to be malfunctioning with the majority of elements

Having some difficulty with the :first-child selector. It just won't cooperate in my code. The goal is to execute a simple transform on two elements using the :first-child, but it's failing in multiple instances. Let me explain: First scenario: ...

jqueryhtmlcss

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

Discover a helpful tip for using Pentadactyl with StackExchange's voting buttons

Does anyone know how to enable hinting for voting arrows on StackExchange using Pentadactyl (a fork of Vimperator)? I've tried removing my .pentadactylrc file and restarting Firefox, but still can't figure out how to upvote questions and answers ...

javascriptcssfirefoxvimperator

"I'm facing an issue with aligning elements in my ReactJS application using CSS Flexbox. Despite setting up a flexbox layout, I am unable to

Despite setting up a flexbox to align my elements, I am struggling with vertical centering on my page. I have made sure to use a container for the page and set brute size with viewport units. Here is my sandbox: https://codesandbox.io/s/rlk3j68pmq. Belo ...

cssreactjsflexbox

What is the reason behind the lack of style for the pills in Bootstrap 4?

I attempted to create a vertical navbar using Bootstrap 4 pills, but unfortunately, the styles were not appearing as expected. Instead, all the pills appeared as regular links. Pills without any styling: <ul class="nav nav-pills flex-column"> &l ...

cssmenubootstrap-4

How to prevent Bootstrap Carousel from automatically sliding on mobile devices without using JavaScript

Is it feasible to halt the autoslide feature on mobile view through CSS? Perhaps using a media query for extra small (xs) screens and then adjusting a carousel element...? <div id="carousel" class="carousel slide" data-ride="carousel"> <!- ...

csstwitter-bootstrapmobilecarouselslide

Use the mouse scroll to navigate and scroll a vertical-rl div from right to left

Here I have created a vertical-rl environment; (function() { function scrollHorizontally(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); document.documentElement.scrollLeft -= (delta * 50); ...

javascripthtmlcss

What is causing my HTML wrapper to malfunction?

Below is the HTML code for my website: <div id="wrapper"> <div id="header"> <img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> </div> <!--- End Header ---> <div id="navbar"> <ul ...

htmlcsstagswrapper

Fluidly Floating and Steadfastly Sized Element

Creating a 4-column Panel Bar Layout with Specific Conditions: #c1, #c2 = fixed width #c3 autofill with remaining width #c4 auto width (adjusts based on content) corresponding to #c3 Requirements: Float #c4 to the right instead of absolute positionin ...

htmlcsscss-floatfixed-widthvariable-width