The responsive functionality in Bootstrap is failing to work properly when I resize the browser

I am just starting to learn about bootstrap and I'm facing a challenge with converting a static page into a responsive design. The original width of the page is 980px, so I tried creating bootstrap columns based on the design and applied CSS to correct each div layout. Everything looks good in normal view, but when I resize the window, it ends up looking like this.

https://i.sstatic.net/BvwAl.jpg

This is my first time attempting to make a non-responsive website responsive, so any guidance or tips would be greatly appreciated

Also, can someone explain what media queries are? Would I need to write CSS for three different screen sizes?

jqueryhtmlcsstwitter-bootstrapmedia-queries

Answer №1

There is a missing media query in the code snippet.

        @media screen(min-width: 801px) { 
            body { font-size:1em; }
            img { width:400px; }
        }

To see a working example, visit this link

Answer №2

To customize your website with a responsive design, start by extracting the necessary template from Twitter Bootstrap and saving the file. Then, grab the required JavaScript and CSS files from Bootstrap and integrate them into your site.

Key media queries commonly used for responsiveness include:

/* CSS Document */
@media (max-width:1200px)
@media (min-width:992px) and (max-width:1199px)
@media (max-width:991px)
@media (min-width:991px)
@media (min-width:768px) and (max-width:991px)
@media (max-width:767px)
@media (max-width:480px)
@media only screen and (min-width: 320px)

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

Organize items without consideration of their dimensions

I am in the process of creating an alphabetized list of categories, from A-Z. I am utilizing ul and li elements to achieve this. My goal is to have the elements displayed consecutively, regardless of their height. While my current code successfully arrange ...

css

Tips on aligning two divs vertically within an HTML <li> element, even with content that varies in size, by utilizing nested flexboxes

Every div contains unique content of varying heights. Our approach involves using flexboxes to ensure equal height for each li element. Now, we are facing a challenge with positioning the div class="2" so that their tops align perfectly. We've expe ...

htmlcssflexbox

3 Offset Columns in Bootstrap 1.5

I'm currently brainstorming a Bootstrap 3 grid design that features a top row with 4 columns and a bottom row with 3 columns centered against the first row like this... https://i.sstatic.net/e1V62.jpg Although I've considered using offsets, uti ...

htmlcsstwitter-bootstrap-3

Using jQuery and Bootstrap to Enhance Checkbox Button Styling

I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here: When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to ...

javascriptjquerycssasp.nettwitter-bootstrap

Retrieve the data of elements that have been clicked using jQuery

I am struggling with a particular issue and would appreciate some assistance. Recently, I've been working on developing buttons that, when clicked, add data to a form for submission. An example of the code structure is as follows: <div> < ...

javascriptjqueryclickelement

tips for remaining in modal window post form submission

I have a form within a modal window. I am using ajax to load content in the same modal window, but the issue is that it redirects to the main page after submitting the form. How can I ensure that the modal window stays open even after the form submission? ...

javascripthtmlajax

Utilizing JQuery to track DIV clicks

I am encountering an issue with DIV clicks while using JQuery. I need guidance on this problem. Within my HTML, there are three designated DIV elements: <html> <body> <div id="overviewContainer"> <div id="firstContainer"></ ...

jqueryhtmlclick

Enhancing the asp.net MVC link element with an ID property

I am currently working on a web application that contains the following link: <a href="@planUrl">@ResourceManager.GetResource("MemberLinkText")</a>. I need to add an ID to this link in order to incorporate a $(document).onClick() handler. Howev ...

javascriptjqueryhtmlasp.netrazor

The asp.net bundle.config file isn't updating to include the latest css files

I'm experiencing an issue with my bundle.config file. I've added some CSS files with the correct path and even rebuilt the solution, but none of the new files are showing up on the page. <?xml version="1.0" encoding="utf-8" ?> <bundles ...

cssasp.netbundle

Why are there two requests appearing in network activity for the jQuery Ajax call?

When making Ajax calls with a beforeSend header option to add an Authorization token, everything seems to be running smoothly. However, upon checking the console, I noticed that there are 2 requests being listed... $.ajax('https://macMini.local:8 ...

jqueryajax

I'm currently working with Bootstrap 5. Is there a technique available to reposition the elements within a div without relying on padding or margin properties?

Developing a Website: <!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

htmlcssbootstrap-5

Transform your CSS3 rotateY into PHP Imagick::distortImage

I'm trying to rotate an image by rotateY(-54deg) on the front-end, and now I need to achieve the same rotation in PHP using Imagick::distortImage. $image->distortImage(Imagick::DISTORTION_PERSPECTIVE, $controlPoints, true); Is there a straightfor ...

phpcssimagick

Position the Form in the center of the page using Flexbox and Material UI styling

I am currently attempting to center align a button on the page. In addition, I plan to include a form in that same area, so I require a container or box that is positioned exactly in the middle of the page. Despite specifying a maximum height and width of ...

cssreactjsflexboxmaterial-ui

Running a <script> tag with an external src attribute in a dynamic manner through the use of eval

Currently, I am utilizing the Genius API to fetch lyrics for a particular song and then embed them within an HTML <div> tag. My interaction with this API is through PHP, employing an AJAX GET request. Upon a successful AJAX request, the following HT ...

javascriptphpjqueryhtmlajax

Adjust the top position of a div element at regular intervals

How can I make the top position of an absolutely positioned div with children change every x seconds using jQuery? I tried using setInterval but it only changes once. Here is my code: .com_prices { width: 100%; height: 100%; overflow: hidden; back ...

javascriptjqueryhtmlcss

Tips for Implementing the jquery.Validate Plugin with a jquery.multiselect Dropdown

Let's talk about a predicament I'm facing: trying to integrate a dropdown box into a form that already makes use of the jquery.validate plugin along with other fields that currently validate correctly. The dropdown box is being added using the jq ...

jqueryjquery-validatemulti-select

Converting a PHP variable to JSON in an AJAX call

At the moment, my approach involves using a jQuery Ajax asynchronous function to repeatedly request a PHP page until a large number of spreadsheet rows are processed. I am uncertain if the way I set the variables to be passed to the requested page is corre ...

javascriptphpjqueryajaxjson

Is it possible to change the text displayed when hovering over various images using just CSS and HTML?

I have created an image and text hover effect. There are four images and corresponding paragraphs for each image. When hovering over an image, the specific paragraph should replace the previous one using only HTML and CSS. Please note the following: The de ...

htmlcssbootstrap-4

Error encountered upon opening an Excel file created using the table2excel jQuery plugin

I am trying to export an HTML table to Excel using the table2excel plugin, but I'm encountering an error in the generated Excel file. How can I resolve this issue? I have set up a JSFiddle demo. To use the plugin, you simply need to follow these ste ...

javascriptjqueryhtmlexcel

Establish the Image Aspect Ratio within an Unordered List

I'm having some trouble adjusting the aspect ratio of an image within a ul. Currently, the image is displaying too large in terms of height and I've tried various solutions, such as wrapping it in another div and applying padding-top: 56.25%; to ...

cssbootstrap-4