Do designers often manually adjust elements using media queries when working with Bootstrap?

Question

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap?

In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the media query directly and make adjustments there, or should I strive to utilize Bootstrap's classes to achieve the desired behavior?

For example...

// Invoking the media query
@media (max-width: 768px) { 
      .my-element {
        background: red;
    }
}

Just a heads up - By "calling media queries" I mean utilizing the default media queries in Bootstrap, such as 750px, 970px, and 1170px.

Appreciate your input.

html css twitter-bootstrap media-queries

Answer 1

Answer №1

If you're utilizing media queries with predefined bootstrap breakpoints, there should be no issue at all. It will be necessary to use them in some cases.

One important thing to keep in mind is to avoid modifying bootstrap classes.

For instance, let's say you have a div like this--

<div class="col-md-6">

across your page. The default width for this element is 50%. Now, if you want it to have a 25% width for a specific div on a certain screen size, do not do it like this--

@media (min-width: 768px) { 
  .col-md-6{
    width: 25%;
  }
  }

The above example will override the bootstrap class throughout the page, which is not recommended.

So, what's the solution?

You should assign an id/class to the element and then style it. Like this--

<div id="myelem" class="col-md-6">

and then style it using the id.

@media (min-width: 768px) { 
  #myelem{
    width: 25%;
  }
  }

That should resolve the issue without any problems.

Note:

Always make sure to include your custom CSS file after the bootstrap CSS. Otherwise, Bootstrap will take precedence over your custom styles.

I hope this explanation helps!

Answer 2

If you're utilizing media queries with predefined bootstrap breakpoints, there should be no issue at all. It will be necessary to use them in some cases.

One important thing to keep in mind is to avoid modifying bootstrap classes.

For instance, let's say you have a div like this--

<div class="col-md-6">

across your page. The default width for this element is 50%. Now, if you want it to have a 25% width for a specific div on a certain screen size, do not do it like this--

@media (min-width: 768px) { 
  .col-md-6{
    width: 25%;
  }
  }

The above example will override the bootstrap class throughout the page, which is not recommended.

So, what's the solution?

You should assign an id/class to the element and then style it. Like this--

<div id="myelem" class="col-md-6">

and then style it using the id.

@media (min-width: 768px) { 
  #myelem{
    width: 25%;
  }
  }

That should resolve the issue without any problems.

Note:

Always make sure to include your custom CSS file after the bootstrap CSS. Otherwise, Bootstrap will take precedence over your custom styles.

I hope this explanation helps!

Do designers often manually adjust elements using media queries when working with Bootstrap?

Answer №1

Similar questions

What steps can I take to decrease the padding of this footer?

Tips for implementing a toggle feature for an ion-card element

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

Enhancing Hover Effects in CSS with Additional Backgrounds

Generate a fresh DOM element when a particular height threshold is achieved, utilizing a portion of the previous DOM element's content

Adjusting the color of a value in justGage requires a few simple steps to

Scrapy spider malfunctioning when trying to crawl the homepage

Updating the CSS class for a particular text segment enclosed in a <p> or <span> element

`Considering various factors to alter class pairings`

Elements in table do not display properly in Internet Explorer

Using jQuery to Decode the XML Document Containing National Threat Level Data

In Firefox, certain scroll positions cause elements to vanish

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

Creating a dynamic hyperlink based on the selections made in three drop-down menus using HTML code

Stop the execution of the setTimeout function when the webpage loads in JavaScript

How do I input text into a Google Doc using an XPATH or element that is difficult to manipulate?

Unusual anomalies observed in CSS navigation bar styling

Ways to compel divs underneath aligned divs

Is it possible to create a website with a single session for all users using JavaScript

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder