Error in Bootstrap column responsiveness

My pricing plan structure, created with bootstrap columns, works well across various resolutions except for 768px to 992px. Within this range, the columns become too skinny, causing the content to overflow and look messy. I attempted setting a min-width property, but it resulted in column overlapping. Ideally, between these resolutions, having two side by side and the other two below would be best, but achieving this outcome has been challenging. Any suggestions or solutions would be greatly appreciated.

Codepen: http://codepen.io/anon/pen/yyRLpv

HTML:

<html>
  <head>
  </head>
  <body>
    <section id="pricing" class="module parallax parallax-3 inset_shadow">
<div class="container">

<div class="pricing-tables">
<div class="row">
<div class="col-sm-3 col-md-3">
... (omitted for brevity) ...

<p>CSS:</p>

<pre><code>.pricing-tables {
    padding: 20px; 
}

.pricing-tables h1 {
    font-size: 48px; 
}

... (CSS properties listed continue here; not shown for brevity)

Answer №1

Give this a try.... This solution should effectively address your problem...

Cascading Style Sheets

@media(min-width:768px) and (max-width:992px)
{
    .heading h2
    {
         font-size:1.1em;
    }
   .cost h3
    {
        font-size:55px;
    }
    .cost .symbol
    {
         font-size:30px; 
    }
}

Answer №2

To incorporate media tags into your CSS, use the following syntax:

@media (max-width:992px) and (min-width:768px) {
 .plan .head h2{font-size:14px;}
 .plan .price h3{font-size:50px;}
}

Within this media query, you have the ability to select any element on the page.

Answer №3

Appreciate all the helpful suggestions! I managed to resolve the problem by swapping out col-sm-3 with col-sm-6 and that fixed the wrapping issue. Feel free to check out my updated Codepen with the solution in case it might be useful for others down the road. Thanks once again!

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

External CSS styling does not appear to be affecting the Shadow DOM in Google Chrome

I am currently utilizing polymer's paper-action-dialog and paper-button components on my webpage. Within the paper-action-dialog element, there are two paper-buttons. I am looking to style these paper-buttons externally (in the main HTML file). I have ...

The functionality of Bootstrap's JavaScript is dependent on the presence of jQuery - Reactjs framework

When attempting to combine bootstrap with reactjs, I encountered an issue with importing Bootstrap.js It seems that Bootstrap's JavaScript requires jQuery Below are some of the import statements I have tried: import $ from 'jquery'; imp ...

Issue: Bootstrap collapsed section remains open when clicking a new link to toggle another section

I am in the midst of creating a one-page layout, featuring collapsible content in the menu. Rather than utilizing a Bootstrap menu for this collapsed content, I have opted to use the ahref elements to display the content of each respective link. One issue ...

What is the best way to extend a div to fill the full width of a webpage?

I'm struggling to align a div perfectly with the left, right, and top edges of the page. Despite trying various solutions suggested by others, I just can't seem to get it right! Any assistance would be greatly appreciated. Thank you. ...

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

After writing the following jQuery script, I encountered an issue. <script type="text/javascript"> $(document).ready(function(){ $('#Oval-1').on('mouseover', function(e) { $("#Oval-1").fadeOut ...

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

Is it necessary to set up Tailwind CSS for each new project we start?

Is it necessary to install Tailwind CSS and its files for each new project in every new directory? I'm uncertain if this is the correct process, or if there is an alternative method available. Furthermore, when making changes to files on a live serve ...

Tips for inserting columns into a table using CSS and HTML

Having trouble working with columns in the tab div? It seems to work when it's pulled out of the tab div. Can anyone advise what I might be missing? For an example code, please visit: https://www.w3schools.com/code/tryit.asp?filename=FZJ3933552IJ Cu ...

Automatically adjust the size of input control text based on the screen dimensions

I am facing an issue with resizing the text inside an input control when the window is resized. The problem occurs between the width range of 1032px to 575px, where the text inside the input control does not display completely. However, below 575px width, ...

Can a shadowed box feature a notch using only CSS?

I am facing a challenge with designing a layout where I am questioning whether it can be achieved using pure CSS or if images are necessary. My goal is to create something similar to the following: In this design, the <body> represents the yellow a ...

Is there a way to automatically position my canvas beside my table when there is enough space on the screen, and stack them underneath each other if the screen

I am facing an issue with aligning a table containing data and a chart visualizing this data using Chart.js. The chart is displayed in a "canvas" element and I can't seem to get them positioned next to each other. I have tried implementing the follow ...

Adding another column in Bootstrap causes it to shift downwards

![image description][1] I have noticed that when I add column number 1, column number 2 moves down. But when I delete column number 1, column number 2 moves up as expected, similar to column number 3. I'm unsure why this is happening? <div class=& ...

Developing customized tools for twitch broadcasters

While exploring the world of streaming, I stumbled upon various widgets like chatboxes and follower goals that piqued my interest. Now, I'm eager to create my own versions. One standout example is the streamlabs widgets. You can tweak the HTML/CSS/JS ...

When the page loads, does the browser automatically download mypic.jpg?

#feature1 { display: none; } #feature2 { background-image: url('mypic.jpg'); visibility: hidden; } <div id="feature1"> <span id="feature2"></span> </div> Kindly explain your response by providing a reason ...

Lower the transparency of a container without affecting the transparency of its elements

Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...

Finding the correct path for the background-image URL in VueJS has been a challenge

Currently, I am learning VueJs and have encountered a roadblock in my journey. The issue I am facing is determining the correct path to specify for the URL of the background-image property in the CSS section of my component. <template> <div cla ...

Modify individual list item attributes

I have been attempting to modify the background of the list item labeled as home in order to ensure that it displays hover properties even when not being interacted with. Despite specifying this in the class, the appearance does not change. Below is the H ...

Modifying the theme of the Angular UI-Bootstrap datepicker

I am currently facing an issue with my angular datepicker, which is appearing oversized and covering almost 30% of the screen. Additionally, there are large gaps between the dates in the calendar view. After some investigation, I believe this problem may ...

Ensure the slider functions on all types of browsers

I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width ...

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...