Large button in Bootstrap 3 breaks out of Jumbotron on smaller mobile screens

I have set up my layout with a Jumbotron that features a prominent call-to-action button.

<a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a>

However, when viewed on an XS mobile screen, the button extends beyond the boundaries of the Jumbotron. You can see this in the screenshot provided:

I attempted to address this issue by adding a new row and column, and then changing the button class to 'btn-block'. While this does keep the button within the Jumbotron, the text still overflows.

Is there a way to adjust the size of the button specifically for small mobile screens? For example, transitioning from a large size to normal?

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

To make the button smaller on mobile devices, you can utilize media queries.

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:11px;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:12px;
    line-height: 1.2;
  }
}

Check out a demo here:

Answer №2

The reason for the button bleeding out seems to be the length and size of the text. To resolve this issue, a possible solution is adjusting the font-size using media queries at the same breakpoint as Bootstrap.

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

Achieving centered body content on a webpage through CSS

I have completed the design of a webpage and utilized CSS for positioning elements. The current layout consists of a Header, Horizontal Menu, and a Content Section with 2 columns, all of which are set to the same width. Although I have successfully aligne ...

css

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

htmlcssanimationfullscreen

Creating a Modern Tooltip Menu with HTML, CSS, and Bootstrap

My goal is to design a menu that opens to the right, similar to a tooltip. I have experimented with different bootstrap techniques, but I am encountering difficulties in including HTML li elements within the tooltip. ...

jquerycsstwitter-bootstrap

SASS : Loop not producing the most efficient CSS output

Is there a way to optimize CSS generation using a @for loop in SASS? An example speaks louder than words: Here is my SASS code: @for $i from 1 through 2 { .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} { background: red; ...

cssloopssass

Bootstrap 5: After tapping on the button, the hue was transformed

I've been using Bootstrap buttons and I decided to change the color of one. However, when I clicked the button, it still changed to blue even though I specified ".btn-primary:active". HTML: <button type="button" class="btn btn-prima ...

htmlcsstwitter-bootstrapbootstrap-5

Employing IF conditions within a form to refine options

I am looking to streamline the options in my form based on the car and transmission selected. I have set up the form, but I am struggling with the JavaScript code. I need help figuring out how to only display certain color options when Car 1 is chosen alon ...

javascripthtmlcssif-statement

Internet Explorer 11 encountering a flaw with absolute positioning

In my web page, everything looks good in Google Chrome, Firefox, and Opera, but I'm facing an issue with Internet Explorer 11. Here is the simplified HTML: <div class="container"> <div class="page-content"> <div id="corner ...

csscss-positioninternet-explorer-11

Only one div is revealed by Jquery show and hide, while the other remains hidden

I'm attempting to utilize a single href link to toggle the visibility of two other divs. The first div should be visible by default, while the second div remains hidden. <a href="#ben1" class="fa fa fa-times closer" > <p> clickab ...

jqueryhtmlcss

Creating stylish components with MP4 styling techniques

Struggling to grasp React.js and facing challenges with styling using react, styled components, and Bootstrap. The ultimate goal is to display 3 gifs in a row with centered buttons and no spacing between them. Each gif should be 100vh. Below are all the e ...

twitter-bootstrapreactjsstyled-components

Enhancing User Experience with CSS

Is there a way to create a link within a div and change the hover color to indicate it's a link? The challenge is that my div contains both an image and text in separate divs. div { :hover { background-color: light cyan; } Currently, when I hov ...

htmlcss

Mastering the Material-UI Grid in SPAs: Conquering the Negative Margin Dilemma

While attempting to build a single page application (SPA), I've encountered an issue with using the Grid component from material-ui. Normally, I rely heavily on the Grid, but in this new project, something seems amiss. The current problem is evident ...

javascriptcssreactjsmaterial-ui

Improving my 'Adaptive' layout

Check out my website at kylesethgray.com. I've created a 'somewhat responsive design', but there are two issues that need fixing: Whenever I have a list, whether it's an <ul> or <ol>, the bullets get cut off when the bro ...

htmlcsstumblr

What is the best way to insert an image between two sections using CSS?

As I work on a new webpage, I find myself stuck (yes, I'm a beginner :-) ). I have a header followed by a section, and I would like to place images in between the two. However, despite my attempts to position the images, they keep getting hidden "und ...

htmlcssz-index

Creating DIV's with Equal Heights Using AngularJS ng-repeat

I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...

javascriptjqueryhtmlcssangularjs

What strategies can I use to ensure that the navigation bar is responsive when viewed on a

Check out my CSS file here for the navigation styling. See the screenshot of my HTML file showcasing the navigation panel here. I'm seeking assistance in making my navigation responsive on all mobile devices, as it is currently not functioning prope ...

htmlcssgithub

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

javascriptjquerycss

What is the method for adding an event listener in AngularJS within an ng-repeat iteration?

I'm completely new to AngularJS and currently working on building a photo gallery. The basic idea is to have an initial page displaying thumbnail photos from Twitter and Instagram using an AngularJS ng-repeat loop. When a user hovers over an image, I ...

javascripthtmlcssangularjs

Display the user's input value in a tooltip without using jQuery

I am looking to achieve this particular layout design. https://i.stack.imgur.com/p9UTH.jpg I am unsure about how to display the input value in the bubble within this layout. The visibility of the bubble should only be triggered on hover. Below is the cod ...

javascripthtmlcss

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap