Whiskey Angostura and Straight Row Set to 8, not 12

Recently, I incorporated Bourbon, Bitters, and Neat into my rails application. However, I am encountering an issue where the number of grid-columns is stuck at 8 instead of the desired 12.

To address this problem, I have taken the following steps:

  • Ensured that @import 'bitters/bitters' appears after bourbon and before neat in my manifest file.
  • Uncommented the Neat Override variables in _grid-settings, specifically setting $grid-columns to 12.
  • Imported both _grid-settings and neat-helpers in the bitters manifest file, which is subsequently imported in the application manifest file.

The puzzling aspect is that while all other variables in the _grid-settings sheet can be altered successfully, the grid-columns remains unaffected. Given that I have not defined grid-columns elsewhere, this situation has left me baffled!

Your assistance on this matter would be greatly appreciated. Thank you!

htmlcssruby-on-railssass

Answer №1

When utilizing the default Bitters _grid-settings.scss file, you will come across two lines that define the breakpoints:

$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 8);

Regardless of the value assigned to $grid_columns, these breakpoints will set the columns to "4" and "8" respectively -- due to passing a columns value into the new-breakpoint function. Therefore, if your project was being viewed on a $large-screen size, you would see 8 columns displayed on the visual grid.

Answer №2

It turns out that the issue was not with my columns being set correctly, but rather with the visual grid settings. The new breakpoints in the grid-settings files were causing my screen to display 8 columns instead of my desired layout. It's odd that they were separated, but I temporarily resolved the problem by commenting out the new breakpoints. Now, the visual grid aligns perfectly with my desired columns.

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

Simplifying the process of implementing Jquery CSS Toggles

I am planning to simplify the process of toggling visibility for 12 different divs when clicking on 12 different buttons. Instead of repeating the same code multiple times, I am considering a more efficient approach. My idea is to: Step A) Initially hide ...

jqueryhtmlcssswitch-statementtoggle

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

javascripthtmljquery-uijqueryjquery-tabs

Using .htaccess to Conceal Directories with Documents

It seems that my website is being targeted by individuals seeking to obtain all the code. I have implemented an .htaccess file that will display nothing when someone visits domain.com/images, but if they specifically request domain.com/images/logo.png, the ...

htmlcss.htaccessdirectory

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

csswordpressmenu

Scrolling automatically within a child element that has a maximum height limit

I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...

javascripthtmlcssvelocity.js

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

javahtmlspringspring-mvc

Create a dynamic onClick event script and integrate it into Google Optimize

I need to incorporate a button element into my website using Google Optimize for an experiment. This button needs to trigger a specific script depending on the variation of the experiment. I have attempted two different methods: <button id="my-button" ...

javascripthtmldynamic-htmldynamic-script-loadinggoogle-optimize

Tips for incorporating additional filter criteria into a jquery script

I am currently utilizing a jQuery script to filter data based on date periods. However, I now need to include an additional filtering criteria for the "POSITION" column. Since I lack expertise in jQuery, I would rather accomplish this using plain vanilla J ...

javascripthtml

What is the best way to eliminate the unattractive white border surrounding dialog boxes?

Is there a way to remove the unsightly white outline around the UI Dialog? Check out this picture of the dialog I've tried various solutions I found on Google and Stack Overflow, such as: .ui-widget-content { border: none !important; outlin ...

jquerycssdialog

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

javascripthtmlcssreactjssvg

CSS: Ensuring the width is adjusted to the content or wrapper that is wider

I am facing an issue with mouse-over highlighting on a set of list items. Below is the HTML structure I am working with: <div id="wrapper"> <div id="box"> <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex& ...

htmlcsswidthhorizontal-scrolling

Experiencing a PHP Contact Form Problem - Unable to Identify the 400 Error Cause

Greetings! I'm fairly new to all this website creation stuff and I'm currently working on setting up a contact form from a template that I stumbled upon. Despite my best efforts in configuring the PHP code, I keep encountering a 400 response erro ...

phphtmlcontact-formhttp-status-code-400

Having trouble with AngularJS not rendering on your HTML page?

This question has probably been asked countless times, but I'm genuinely unsure about what I'm doing wrong. The solutions I've come across so far haven't fixed the issue for me. Just to provide some context, I'm currently followin ...

javascripthtmlangularjs

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

I need to figure out how to hide the submit button if the email entered is the same as the one in the database from action.php. Can anyone help me with integrating this functionality into my existing code? <form onsubmit="return submitdata();"> ...

javascriptphpjqueryhtmlajax

Difficulty encountered with PHP form insertion action

I am uncertain about where the errors might be occurring. I have attempted to inspect MySQL, but it seems that nothing is being inserted into my database. To begin with, here is a snippet of my HTML code: <form action="registerAction" method="POST"> ...

phphtml

What is the best method to adjust the width of the <option> tag within the <select> tag using CSS?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="s ...

htmlcsshtml-select

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

javascripthtmlnode.jsexpress

What is the best way to incorporate Bootstrap's datepicker into a website?

I'm currently working on an AngularJS application. Here is the code I have: <directive date="date" date-format="YYYY-MM-DD" > <input ng-model="Date" type="text"/> </directive> Is there a way to integrate an Angu ...

angularjshtmltwitter-bootstrapdatepicker

Boost your website's loading time by utilizing the async and defer attributes

Looking to enhance the speed of my webpage, particularly focusing on improving initial page speed. Research suggests that using the async and defer attributes for JavaScript can be beneficial. All JavaScript scripts are currently placed just above the cl ...

javascriptcsshtmlsrc

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

javascripthtmlcss