Problems with Bootstrap's extra small breakpoint

Question

Problems with Bootstrap's extra small breakpoint

"Greetings everyone, I am a newcomer to this field, currently tackling the third module assignment for Coursera's HTML, CSS, JS course. Facing an issue where applying styles for h1 under @media (max-width: 767px) does not display correctly at 767px but only up to a maximum of 766px."

What could be causing this problem and how can it be resolved?

Here are the git links:

Website

Git repository

Appreciate your assistance.

@media (max-width: 767px){
h1{
    color: red;
}}  

<div class="main-content container">
<div class="row">

    <h1 class="text-center">Our menu</h1>
    <div class="col-xs-12">
      <h2 class="text-center">Chicken</h2>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",...
      </p>
    </div>
  
</div>

html css twitter-bootstrap

Answer 1

Answer №1

Here is a demonstration of how media queries function. Take a look at the example below and refer to the comments for clarification. Click on the "run code example" button and then select the "full page" link. Resize your browser window to see different styles applied at various widths.

Pay attention to the sequence in which the media queries are arranged. They need to be structured in a way that they override previous sizes as the browser width changes.

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML = window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles*/
  color: #333;
  border: 1px solid green;
}

@media (max-width: 900px){
  /*
  These styles take precedence when the screen has a maximum width of 900px.
  In other words, when the screen is 899px wide or smaller
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

@media (max-width: 767px){
  /*
  These styles take precedence when the screen has a maximum width of 767px.
  In other words, when the screen is 766px wide or smaller
  */
  h1{
    color: red;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

While this method works, it is recommended to approach it differently. Use min-width in your media queries instead. Begin with default styles for the smallest browser size and gradually add more styles or override existing ones as the browser size increases. This approach is simpler to write and comprehend.

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML=window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles*/
  color: #333;
  border: 1px solid green;
}

@media (min-width: 767px){
  /*
  These styles take precedence when the screen has a minimum width of 767px.
  In other words, when the screen is 768px wide or larger
  */
  h1{
    color: red;
  }
}

@media (min-width: 900px){
  /*
  These styles take precedence when the screen has a minimum width of 900px.
  In other words, when the screen is 901px wide or larger
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

Answer 2

Here is a demonstration of how media queries function. Take a look at the example below and refer to the comments for clarification. Click on the "run code example" button and then select the "full page" link. Resize your browser window to see different styles applied at various widths.

Pay attention to the sequence in which the media queries are arranged. They need to be structured in a way that they override previous sizes as the browser width changes.

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML = window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles*/
  color: #333;
  border: 1px solid green;
}

@media (max-width: 900px){
  /*
  These styles take precedence when the screen has a maximum width of 900px.
  In other words, when the screen is 899px wide or smaller
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

@media (max-width: 767px){
  /*
  These styles take precedence when the screen has a maximum width of 767px.
  In other words, when the screen is 766px wide or smaller
  */
  h1{
    color: red;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

While this method works, it is recommended to approach it differently. Use min-width in your media queries instead. Begin with default styles for the smallest browser size and gradually add more styles or override existing ones as the browser size increases. This approach is simpler to write and comprehend.

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML=window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles*/
  color: #333;
  border: 1px solid green;
}

@media (min-width: 767px){
  /*
  These styles take precedence when the screen has a minimum width of 767px.
  In other words, when the screen is 768px wide or larger
  */
  h1{
    color: red;
  }
}

@media (min-width: 900px){
  /*
  These styles take precedence when the screen has a minimum width of 900px.
  In other words, when the screen is 901px wide or larger
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

Answer 3

Answer №2

My suggestion would be to opt for the updated syntax as it is much simpler to grasp.

@media screen and (max-width: 767px) {
  color: red;
}

In other words, we are specifying that when the width is equal to or less than 767 pixels, then...

Answer 4

My suggestion would be to opt for the updated syntax as it is much simpler to grasp.

@media screen and (max-width: 767px) {
  color: red;
}

In other words, we are specifying that when the width is equal to or less than 767 pixels, then...

Problems with Bootstrap's extra small breakpoint

Answer №1

Answer №2

Similar questions

String Replacement in JavaScript

The navigation elements are misaligned when viewed on a mobile device

Optimal approach for blending release and debug code in a web application

Tips on how to maintain the value of an integer variable even after clicking a submit button, enabling its reuse on the same page

Embeddable javascript code can be enhanced by incorporating references into the header

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

What is the best location for storing css files in Laravel?

The Bootstrap tabs are not correctly displaying the content

Using the linearGradient feature within an SVG to create a transitional effect on the Fill property

Lack of consideration for height within tables positioned absolutely

How to use Iframe for "bookmarks" without causing the main browser to jump?

Combine lists with floating elements positioned to the left or right

I created an image that can be clicked on, but unfortunately it only functions properly on the

Techniques for ensuring input validity using JavaScript

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

Bidirectional updates in AngularJS with CSS styling

Initializing an HTML5 video player directly from an Array

Hamburger must be used in order for the menu to be displayed

What is the difference in speed between drawing on a transparent canvas and determining if a point is transparent compared to determining if a point is within a complex polygon?

In which specific location within the Bootstrap CSS files can the `footer` class be found?