Tips for decreasing the width of your HTML or body content using media queries

I am struggling to adjust the width of my desktop view using a media query. My most recent attempt looks like this:

@media (min-width: 992px) and (max-width: 1199.98px) {

   html, body {
        max-width: 80%;
   }
}

However, this code seems to have no effect on the layout. I am hesitant to modify the container as it may impact the navbar. I am using my own stylesheet apart from the bootstrap cdn, but I'm not sure if that's causing the issue. Am I approaching this problem correctly or is there something crucial that I am overlooking?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It's important to be cautious when working with high-level elements in a layout library as it can restrict future design options for yourself and others. For example, implementing a full-width banner could become challenging. Additionally, indiscriminately overriding all instances of a Bootstrap class is not recommended.

To address this issue, consider adding a custom class like .container.narrow to the .container or .container-fluid element to limit its width:

.container.narrow {
    max-width: 80%;
}

This custom class allows you to specify a narrower width for specific containers while keeping wider content separate by using containers without the custom class.

<div class="container narrow"> ... </div>

Whether you implement this within a media query may not make a significant difference in this scenario.

Answer №2

After tirelessly searching for a solution to my mobile screen dysfunction, your advice proved to be the perfect fix. I can't thank you enough for sharing your knowledge. By removing the meta-name line as suggested, everything is now running smoothly.

Sarah

@TechGenius123 It seems like adding the viewport tag did the trick!

Feb 10, 2021 at 10:30

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

What is the process of utilizing col-*-offset in decimal values using Bootstrap?

Can an offset be applied using decimals? For my situation, I require an offset of 3.5. I've tried using col-xs-offset-3.5, but it does not seem to work. ...

htmldombootstrap-4

What is the reason for the absence of margin collapsing in this particular instance?

One thing that confuses me is the absence of vertical margin collapse between each definition list(dl). Looking at the style selector "#sweden dl" below, I have specified a margin of 10px 20px; meaning a margin-top and margin-bottom of 10px for each dl, a ...

htmlversion-control

What is the best way to retrieve the last row or column using jQuery and Bootstrap?

I've implemented a fluid container format where I have created a panel with a unique id. The data is continuously added to the container using the <row><col>data</row></col> format. Is there a way to retrieve the last row and ...

jquerytwitter-bootstrap

Iterating through elements to set the width of a container

I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...

javascriptjqueryhtmlcss

Preventing double clicks in jQuery causing dysfunction in a PHP form function

Seeking assistance with a tricky jQuery bug that is causing issues on a specific feature of our CRM. The bug involves double form submissions, and we suspect it may be related to timing or order of operations. We have implemented a jQuery double click disa ...

javascriptphpjqueryhtmlforms

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

htmlcsscss-selectors

Angular unable to find a route for external links

I am attempting to create an external link with an <a href="google.com"></a>, but for some reason it redirects me to localhost:4200/google.com... I'm not sure why this is happening, but I need to eliminate the localhost:4200. Below is the ...

htmlangular

Think about using floated elements to determine the width of blocks

Consider this example HTML markup (link to jsFiddle): <div style="float: right; width: 200px; height: 200px; background-color: red; margin: 0 20px 0 30px;"> Block 1 </div> <div style="height: 100px; background-color: green;">Block ...

htmlcsscss-floatwidth

Using ng-if or ng-checked to match values from a list separated by commas

Below is the HTML code that I have: <!doctype html> <html lang="en> <head> <meta charset="UTF-8> <title>Example - example-ngModel-getter-setter-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularj ...

htmlarraysangularjscheckboxangular-ng-if

jQuery, trigger a function when the document has finished loading

I have created the following code in an attempt to display a message to only Internet Explorer users visiting the page: <script src="jquery.reject.js"></script> <script> $(document).ready(function() { $.reject({ reject: { a ...

javascriptjqueryhtml

Instructions for transferring files directly from one website to another

Looking at the PHP code snippet provided: <?php $image_cdn = "http://ddragon.leagueoflegends.com/cdn/4.2.6/img/champion/"; $championsJson = "http://ddragon.leagueoflegends.com/cdn/4.2.6/data/en_GB/champion.json"; $ch = curl_init();` $timeout = 0; cur ...

phphtmlwebdownload

Fade out and slide close a div using jQuery

I am creating a new website and incorporating jQuery for animation and simplified JavaScript implementation. My goal is to have a button that, when clicked, will close a div with a fading out and slide up effect. Can this be achieved? Thank you. ...

javascriptjqueryhtmlcss

Issues encountered with MP4 HEVC video playback on Chrome browser

My Wordpress website hosts videos uploaded by users in mp4 format. While it's not ideal for performance, I am doing this for a beta test period of a few months. Some of the mp4 files aren't functioning correctly, showing only sound with a black ...

htmlwordpressvideomp4hevc

Use Ajax to dynamically update the href attribute of an ID

I have a page with songs playing in a small audio player, and the songs change every 1-2 minutes or when I choose to (like a radio). Users can vote on each song using the following format: <span class='up'><a href="" class="vote" id="&l ...

javascriptphpjqueryhtmlajax

When Content Div and Menu Div collide: Resolving HTML and CSS Dilemmas

I am having an issue with my content navigation div overlapping the menu navigation div. Can anyone please help me figure out what I am missing here? You can find the fiddle link below: https://jsfiddle.net/y4c2xs5j/1/ HTML: <div class="top-nav"> ...

htmlcssbootstrap-4css-position

Is there a way to prevent the ENTER key on the keyboard from interacting with

When visiting http://api.jqueryui.com/datepicker/, I came across the following information: Keyboard interaction While using the datepicker, various key commands are available: PAGE UP: Move to the previous month. PAGE DOWN: Move to the next month. CTRL ...

javascriptjqueryhtmljquery-uidatapicker

Have the validation state classes (such as .has-error) been removed from Bootstrap 5?

I've noticed that the validation state classes (.has-success, .has-warning, etc) seem to have been removed in bootstrap 5 as they are not working anymore and I can't find them in the bootstrap.css file. Before, I could easily use these classes w ...

htmlcssangularbootstrap-5

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

htmlcss

JQuery Load fails to load in real-time

I have a PHP file where I am using JQuery to load the content of another file called 'live.php' which should display the current time, but for some reason it is not loading live. Can anyone help me troubleshoot this issue? It used to work perfect ...

phphtmljquerytimetrending

What is the functionality of "classnames" in cases where there are multiple classes sharing the same name?

Currently, I am reviewing some code that utilizes the npm utility classnames found at https://www.npmjs.com/package/classnames. Within the scss file, there are various classes with identical names (small and large), as shown below: .buttonA { &.smal ...

htmlcsstypescript