Why is the medium-offset-2 value not being implemented?

Currently utilizing Zurb's Foundation for the construction of my website, where I have integrated two action buttons within a callout section.

My objective is to create space between the two buttons up to tablet-sized screens by applying the medium-offset- class.

<div class="callout large">
    <div class="row column text-center">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <a href="#" class="button medium-2">Some Button</a>
        <a href="#" class="button medium-2 medium-offset-2 hollow">Another Button</a>
    </div>
</div>

However, after implementation, the outcome maintains the typical gutter space between the buttons. It seems that the CSS styling for .button overrides the margin adjustment from medium-offset-

Check out this example on jsfiddle to see the issue firsthand. Even rearranging the order of button and medium-offset- elements in the HTML did not resolve the problem.https://jsfiddle.net/u356n5cs/

I've attempted targeting the buttons individually with an ID or using .named_div > a to add space, but it compromises the central alignment of the content.

htmlcsszurb-foundationzurb-foundation-6

Answer №1

It appears that the medium-offset-2 class is being explicitly overwritten in your layout:

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

Upon closer inspection, it seems that the culprit could be the .button class applied to the same element:

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

To ensure the margin is correctly applied to the button, you may need to create a custom style similar to the one below:

@media screen and (min-width: 40em){
  .button.medium-offset-2 {
    margin-left: 16.66667%;
  }
}

For a visual demonstration, you can check out this example here.

Answer №2

The 

<div class="row column text-center">
class you're using is designed for a full-width row with 12 columns in the grid system, so there's no room to add more columns. To create space between the title and buttons, I modified your code by separating the title into its own row and placing the buttons in columns within another row with undefined column widths. When tested in the fiddle, this layout expands the buttons to the edges on medium-sized screens:

    <div class="callout large">
        <div class="columns row text-center">
            <h3>Lorem ipsum dolor sit amet.</h3>
        </div>
        <div class="row text-center">
            <a href="#" class="button medium-2 columns">Some Button</a>
            <a href="#" class="button medium-2 medium-offset-2 hollow columns">Another Button</a>
        </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

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

I have a map.jsx file in my React application that contains the code below: import React from 'react'; import GoogleMapReact from 'google-map-react'; import './map.css'; const Map = ({ location, zoomLevel }) => ( <d ...

javascriptcssreactjsgoogle-maps

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

What could be causing the Bootstrap collapse feature to malfunction?

<nav id="na-vrh" class="navbar navbar-expand-lg navbar navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> < ...

htmlbootstrap-5

Class is still visible after the media query preview is looked at, despite attempts

Our print preview library is set up to display the final product to users, but we don't want the images to actually be printed since we are using branded paper. To address this, I have included a print media query in the print.css file and added all ...

javascriptjqueryhtmlcss

What was the recommended dimensions for CSS containers in 2018?

In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px. ...

cssuser-interfaceresponsive-design

Objective-C and the World of WebSockets

Possible Duplicates: Comparison of WebSockets, TCP/IP, and JavaScript/AJAX for iPhone chat Integrating WebSockets into a Cocoa application Hello all, our team is embarking on creating a bespoke iPhone chat app and deliberating the use of WebSocket ...

c#javascriptiphoneobjective-chtml

How to Customize Background Colors for Blogspot Posts?

Recently, I started my own blog using Google Blogger and I've run into a minor issue. Despite applying a background image for the entire blog, all of my posts have a white background instead. I haven't used any background-color in the HTML code o ...

htmlcssbloggerblogger-dynamic-views

Dynamically shift the table footer to the bottom of a scrolling div by utilizing jQuery

I'm facing a challenge where I need to relocate each th tag from the footer row of a table to the bottom of a scrolling div. You can check out the scenario on this link. Currently, I am able to achieve this by hardcoding it like so: $('.sticky- ...

javascriptjqueryhtmlscrollhtml-table

Is my PHP code impacted by this CSS styling?

After applying the CSS styles below to my login form, I am encountering an issue where my POST variables are showing up as NULL upon form submission. What could be causing this? Below is the CSS code used: #wrapper #Box input[type=text], textarea, input[ ...

phphtmlcss

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

htmlcss

The push action in NavController is not displaying Google Maps as expected

Trying to display a map upon clicking a button is proving challenging for me. It appears that the function NavController.push() does not work as expected, while NavController.setRoot() does. Despite not encountering any errors, I am unable to identify the ...

htmlgoogle-mapstypescriptionic2

Arranging the R shiny selectInput controls in the correct position

I am looking for help with adjusting the position of two selectInputs in my R Shiny script. Currently, the dropdown is not appearing clearly and I've tried using padding without success. I have attached a snapshot for reference. Any assistance would b ...

cssrshinyshinydashboard

Navigating to the designated row within the HTML table even with a scrollbar present

I am working with a table where the selected row is highlighted when a user clicks on it. In another panel, there is a map displaying all employees. Each row in the table has a unique ID and clicking on an employee's image on the map highlights their ...

javascriptjqueryangularjshtml

Error encountered: $(...).pickadate is not defined as a function

I am currently working on a basic web project that involves a simple form where users enter their name, birthday, and university degree. I am utilizing Materialize and jQuery for this project. However, I have encountered a frustrating issue while trying to ...

jqueryhtmlmaterialize

Which is Better: Data-URIs or Embedding Fonts for Icons?

Currently, I am in possession of a set of approximately 10 monotone icons all sized at 25x25 or smaller. I am contemplating between two options for better performance: 1) Incorporating them into CSS using data URIs 2) Utilizing them as a font (for exampl ...

cssiconsembedded-fontsdata-uri

The link button appears unselected without a border displayed

I am facing an issue with a link button in my code. Here is the snippet: <div class="col-2"> <a type="button" routerLink="auto-generate-schedules/generate" class="btn btn-primary mb-2">Generate Sche ...

javascripthtmlangularbootstrap-5

Adding a class using jQuery based on whether a section is visible or hidden on the screen

Seeking advice on the best approach to take. Division 1 or section - Apply style 1 if division 1 is currently visible on the screen. Division 2 or section - Apply style 1 if division 2 is currently visible on the screen. Division 3 or section - Apply st ...

javascriptjquerycss

Trouble aligning a div at the center within another div using margin auto

I am facing an issue with centering a div horizontally inside another div. Here is my HTML code: .block { padding: 0px 20px; max-width: 820px; margin: 0 auto; background-color: #ff0; } .container { margin: 0 auto; display: inline-block; bac ...

htmlcss

I am looking for a way to showcase the form value either in the address bar or transfer it to another page using JavaScript. Can

Currently facing a challenge with a form where I need to input the name and email, redirect these values to another page, and display them in the address bar using only JavaScript. Take a look at the form here: View Form Code snippet for the form: <f ...

javascriptjqueryhtml

ASP.NET DIV is experiencing issues with Jquery functionality, causing it to flicker and remain fixed in place

As a beginner in JQuery, I am facing an issue with my code in asp.net. Whenever I click on linkbuttons, the behavior is not as expected. The div flickers and does not change its direction. My goal is to move the DIV left or right by 200px, but no matter wh ...

javascriptjquerycssasp.net