The foundation gem is encountering an issue with incompatible units: 'rem' and 'px'

After installing the foundation gem version 5.5.2.1, I encountered an error when starting the application:

Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised:

Incompatible units: 'rem' and 'px'.

Attempting to resolve this issue, I found some suggestions online to edit the _settings.scss file in my gem folder:

../../var/lib/gems/2.1.0/gems/foundation-rails-5.5.2.1/vendor/assets/stylesheets/foundation/_settings.css

I proceeded to comment out these lines:

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12;

Additionally, I adjusted the $base-font-size with custom values:

 $base-font-size: 14px;
 $rem-base: $base-font-size;

As I prefer not to downgrade my gems, I would appreciate any assistance in resolving this error.

cssruby-on-railssasszurb-foundationzurb-foundation-5

Answer №1

The issue you are facing is likely within your SCSS file, as it seems that there is a mix of rem-calc and px values in a function causing an error. I encountered a similar problem before and was able to resolve it by adjusting specific custom styles and overrides to use rem-calc. It's possible that you are unintentionally conflicting with a default foundation style by overriding a variable.

For instance, the error could arise from code like this:

$my-font-size: rem-calc(18);
.my-class { 
  font-size: ($rem-number - 5px); 
}

This issue can also occur when replacing a variable with a px value utilized by Foundation with rem-calc.

I suggest reviewing your foundations_and_overrides.scss file to identify any variables overridden with a px value, then adjust them to use rem-calc. In my situation, altering $topbar variables resolved the problem.

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

Using inline-block can be effective on certain occasions

Hi everyone, I'm currently facing a puzzling issue and not sure what's causing it. Sometimes the elements I've set as inline-blocks cooperate as expected, but then when I refresh the browser, they suddenly decide to misbehave. Below is my ...

css

I'm seeking answers on selenium and the proper use of CSS selectors, as well as troubleshooting the error message 'selenium.common.exceptions.ElementClickInterceptedException'

After some research, I think I have a grasp on CSS selectors and their appearance. However, when using selenium, how can I locate a CSS selector on a website and then click on it? The correct syntax eludes me. I encountered this error as well: selenium.co ...

pythonhtmlcsspython-3.xselenium

svg contained within a resizable div

I am trying to insert an svg into the .container div that I created using this code snippet. The goal is to make the svg fit perfectly within the dimensions of the .container div, while also scaling proportionally with the page as it is resized: <html& ...

htmlcsssvg

Blog Writer: Picture quality compromised when adjusting size

Issue with blurry images after resizing. The problem is noticeable in the three main images located under the Header section. To preview the blog, click on this link: Click Here Your assistance in solving this issue would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcssblogger

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Is anyone else experiencing a specific issue after updating to WP 5.6? Since the update, all my websites are facing problems with rendering a Slick Slider in the Block Editor. Interestingly, everything looks fine on the front-end. The root of the problem ...

javascriptcsswordpressslick.js

Sizing Bootstrap Carousel Controls

Is there a way to adjust the size of controls in the bootstrap carousel using CSS? I'm working with Bootstrap 4 and have attempted the following, but it only seems to reposition them. .carousel-contol-prev { height: 26%; top: 33%; wid ...

cssbootstrap-carousel

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

Rails: Utilizing AJAX to dynamically populate Bootstrap dropdown menus

In the setup I have, there is a dropdown responsible for displaying notifications. <li class="notifications dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-remote="true" data-toggle="dropdown" data-target="#" href="/notifi ...

javascriptruby-on-railsajaxruby-on-rails-3twitter-bootstrap

Include a scroll bar for menu items that contain submenus, while ensuring that the submenu items remain visible

Looking for a way to add a scrollbar to the courses menu list due to its excessive length (refer to the image below). The fixed top navbar prevents scrolling, making it necessary to implement a scrollbar within the menu itself. After applying the followin ...

jqueryhtmlcssmoodle

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

javascripthtmlcssangularjs

CodePen displaying CSS errorsI'm having trouble getting my CSS

I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated! Here is the co ...

htmlcss

Expand the spectrum of the input range

Is there a way to make the cursor and bar of a range input bigger without changing their length? <input id="speed" type="range" min="10" max="80" /> Any suggestions on how to achieve this? Appreciate your assistance. ...

htmlcssrange

Using Bootstrap to style the <option> element with RGBA colors

Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options. Select CSS: select { background-color: rgba(0,0,0,0.25) !important; border: 1px solid rgba ...

jqueryhtmlcsstwitter-bootstrap

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

javascriptcssliferayliferay-6

Top authentication approach for Ruby on Rails API-only server, paired with ActiveAdmin

I'm currently working on a project that involves developing the frontend in Next.js using the fetch API for requests, and the backend in RoR. The challenge I'm facing is setting up user authentication. After some research, I've come across f ...

ruby-on-railsreactjsauthenticationnext.js

Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code: .center{ width: 90%; margin: 0 auto; } Howev ...

jqueryhtmlcsstwitter-bootstrap-3spacing

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

What is the process for obtaining X through the use of createElement('img')?

Is there a way to retrieve the X position from the left of the tag created using document.createElement('img'); var block00 = document.createElement("img"); block00.src = "images/sep1.png"; If so, how can it be done: if (block00.getBoundingCli ...

javascriptcsshtml

Is the fixed header see-through?

I have a query regarding my website design. Currently, the fixed header on my site is transparent and when I scroll down, the content overlaps the header. However, I want the header to remain above the content. Can anyone provide assistance with this issue ...

htmlcss

What are the best techniques for resizing a Text Field with media queries?

The contact form is responsive and functioning correctly for the textarea field, but there are issues with the input type=text fields on smaller screens. I attempted to address this by incorporating media queries. Below is my code: <!doctype html> ...

htmlcssmedia-queriesresponsive