What is the best way to prioritize .py-md-6 over .p-3 in Bootstrap 4?

I have set the padding for the class .py-md-6 as follows:

.py-md-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;  
}

Despite this, there seems to be a conflict with the .p-3 class in my HAML element:

#id.p-3.py-md-6

It appears that the .p-3 class is taking precedence over the .py-md-6 class. I have tried rearranging the order of the classes, but it did not solve the issue. I also attempted using .p-sm-3 instead, but this class is defined with @media (min-width: 576px) and still overrides .py-md-6.

My goal is to have smaller padding on mobile due to limited screen space, and larger padding on desktop.

I tested a solution that worked in CodePly, but it is not functioning correctly when run locally.

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

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

It is recommended to enclose the padding class within a media query just like the padding utilities do.

@media (min-width: 768px) {
    .py-md-6 {
      padding-top: 6rem !important;
      padding-bottom: 6rem !important;  
    }
}

Answer №2

After taking into consideration the advice given by @ZimSystem, I made some changes to the link tags sequence in my application. I placed Bootstrap before my application.css. Below is the updated code snippet:

%link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ", :rel => "stylesheet"}/
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

By rearranging the order of the tags, my application definitions now take precedence over Bootstrap definitions, resulting in the successful functioning of the app.

Answer №3

Take a look at @media screen. Bootstrap utilizes it. I suggest modifying all grid padding to 6 except for the mobile screen. Alternatively, you could use a single Class IF it better suits your needs.

I personally use sass for precompiling the style, but the traditional method works as well. You can add the following code to your own stylesheet:

my-padding-class{
padding-top: 6rem;
padding-bottom: 6rem;
}
/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
    my-padding-class{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

However, if you want this to be a more general solution for all grid columns, then creating your own class may not be the best approach as you would need to add it repeatedly.

In that case, exploring Sass would be highly beneficial. Personally, I utilize webpack2 for precompiling purposes.

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

Adjust the size of the <textarea> to match the height of the table cell

Below is the code I am using to generate a table containing an image along with a <textarea>: <table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\ <col width="455"> <col width="230"> ...

javascripthtmlcsshtml-tabletextarea

Struggling to create a basic website design using Flex within Bootstrap 5

As a newcomer to Bootstrap and web development, I am eager to create a simple welcome-page with a specific design in mind. The layout should resemble the image found https://i.sstatic.net/AAEQ4.png. The colors in the image indicate where flex rows could b ...

htmlcssflexboxbootstrap-5

Create a scrollable div within a template

After discovering a template that I want to use for my personal project, I noticed a missing element... There's a div where content can be added. That's fine, but what if I add more content than fits in the space provided? The whole website beco ...

javascriptjqueryhtmlcsstemplates

Modify the Link's Color

How can I change the color of a link inside a DIV? The current code isn't working for me. <style type="text/css"> .someDiv { font-size:14px; color:#c62e16; } </style> <div id="someDiv"> <a href="http://www.s ...

css

How can you Use CSS to Float Elements Left and Right while adjusting their Width Dynam

Is it possible to have two columns side by side with dynamic text using only CSS? I'm trying to make the left main text "break" into a new line when it reaches the right category, which is also dynamic. Do I need to use JavaScript for this? https://i ...

csslayoutdynamiccss-float

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Is it possible to nest a span element inside a form_for label tag? I am trying to achieve this in order to style a specific part of the label using CSS, such as making the text red. While it seems like valid HTML based on my research, it is causing some is ...

ruby-on-railscssformshtmlruby-on-rails-3

What could be causing the Fontawsome icon to malfunction within a Bootstrap table item?

I am currently utilizing Fontawsome free version 5.15.4, along with Bootstrap 5.1 to develop a table using JavaScript. let newBtn = createAnyElement("button", { class: "btn btn-success", onclick: "createUser(this)&q ...

javascriptbootstrap-4html-table

Suggestions for resolving the issue of my header being truncated on mobile browsers?

I am facing an issue with my header and need assistance in fixing it. The problem occurs when scrolling down, as it cuts off a part of the header, but returns to normal when scrolling back up. I suspect the hamburger menu might be causing this issue becaus ...

javascripthtmlcss

Achieving True WYSIWYG Performance in TinyMCE 4.x: Tips and Tricks

Currently, I am in the process of developing a custom CMS where I am integrating tinymce to empower users to create page content, similar to what is seen on Wordpress. The content inputted by users in the admin area will be showcased within a designated el ...

jqueryhtmlcsstinymce

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

In order to tailor the font based on the operating system, the following criteria should be followed: For Windows: "Segoe UI" For Mac: "SF Pro" Attempts have been made using the code provided below, but it seems to load before the DOM and lacks persisten ...

javascripthtmlcssreactjswebkit

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation. We are focusing on a call to action section that perfe ...

htmlcsstwitter-bootstrap

The eot file converted online is not functioning as expected

I have tried converting the 'Helvetica Neue Bold' ttf to eot online, but unfortunately it does not seem to work in IE8 and below. The font face I used is as follows: @font-face { font-family: 'HelveticaNeueBold'; src: url(&apo ...

htmlcssfont-face

Why Does my Overlay Keep Bouncing when Using JQuery to slideDown / slideUp Text on Image?

Can anyone help me replicate the text overlay effect that is seen when hovering over an image on The Guardian website? I have almost got it working, but whenever my mouse moves over the trail-text area, it starts bouncing (slideDown slideUp) repeatedly. I ...

jqueryhtmlcss

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

When floating a h4 and 2 divs to the left, and another div to the right, how can I place a block inside the remaining space that perfectly fills it? The background color of this space should not spread outside. [h4][div][div][remaining space][div] Thank ...

htmlcsscss-float

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

jquerycss

Tips for placing text on top of an image within a <p> element

I am grappling with a situation where I have a div containing text within <p> tags, and also an accompanying PNG image. My goal is to position the image to the left of the div so that it overlaps with the text. Despite my attempts at utilizing z-inde ...

htmlcssz-indexoverlap

Arrange CSS to distribute list items across two rows with an unlimited number of items

I need my list items to be arranged in 2 rows like the following: item 1 item 3 item 5 item 7 item 9 .... item 2 item 4 item 6 item 8 ...... My CSS skills are not great, so I am struggling to find a solution for this. I have at ...

htmlcsslist

Issues with IE8 compatibility on the website

I'm in the process of developing a website and I'm facing some issues specifically with IE8 or later versions. For reference, here is a temporary link to the site: . 1 The problems I am encountering are as follows: The login/register form disp ...

jqueryhtmlcssinternet-explorertransparency

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

htmlcss

Positioning pop-up windows using Javascript and CSS techniques

In my web application, there is a search field that allows users to enter tags for searching. The window should pop up directly below the search field as shown in this image: Image I am trying to figure out how the window positioning is actually d ...

javascriptcsshtmlpopup