logo
down
shadow

Issue when trying to apply a @media query with Bootstrap


Issue when trying to apply a @media query with Bootstrap

By : user2951364
Date : November 18 2020, 01:01 AM
I hope this helps . The issue appears to be that you're calling your media query at the top of the page but the regular styles for .mainIcon below it. This is causing the media query to be overwritten by the normal styles which would explain the adjusted padding-left being crossed out when you expect the element. A good rule of thumb is to always include your media queries below your other CSS (or at least under the class/id/etc. you're looking to change).
try:
code :
.mainIcon {
  width: 99%;
  padding-top: 14%;
  padding-left: 20%;
}

@media (max-width: 991px) {
  .mainIcon {
    padding-left: 47px;
  }
}


Share : facebook icon twitter icon
How to have media query widths apply to preset bootstrap xs sm md lg column classes?

How to have media query widths apply to preset bootstrap xs sm md lg column classes?


By : Suman Raj
Date : March 29 2020, 07:55 AM
it should still fix some issue These values (break points) are set by the $screen-sm-min, $screen-md-min and $screen-lg-min variables in Bootstrap's variables.less file.
When changing your break point you also have to change the container widths. I suggest you use the following formula to do that:
code :
$container-*:           floor( ( $screen-* - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
$screen-sm-min: 300px;
$container-sm: floor( ( $screen-sm - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-md-min: 600px;
$container-md: floor( ( $screen-md - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-lg-min: 900px;
$container-lg: floor( ( $screen-lg - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;

@import "bootstrap";
Apply style, only if both classes are in use (media queries / bootstrap)

Apply style, only if both classes are in use (media queries / bootstrap)


By : user3146697
Date : March 29 2020, 07:55 AM
this will help It's applied because there is class subnav on the div which defines text-align: center irrespective of current dimension.
You need to add media query rule for your specific alignment:
code :
@media (min-width: 768px) {
    .subnav {
        text-align: center;
    }
}
Issue while changing font size/family using media query bootstrap

Issue while changing font size/family using media query bootstrap


By : luigivirgo
Date : March 29 2020, 07:55 AM
This might help you I have a font size of 30px in the medium size screen, but i needed to reduce the size of font size to 10px in extra small screen so i tried using media query.
code :
@media screen and (max-width: 480px) {
.frontback{
       font-family: myFirstFont;
        font-size: 10px !important;     
        background-color:red;
   }       
}
Mobile issue , Modify Bootstrap classes or wrong media query

Mobile issue , Modify Bootstrap classes or wrong media query


By : Zing Cheung
Date : March 29 2020, 07:55 AM
To fix the issue you can do The answer was so simple, i removed all media query and used px instead of % on
code :
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.project-methodology-wrap {
  padding: 5rem 0;
 /*========== Media queries ==========*/
}
.project-methodology-wrap .methodologyBullet::before {
  content: '';
  width: 25px;
  height: 25px;
  background: #d4272e;
  position: absolute;
  border-radius: 30px;
  left: 26px;
  top: 0px;
  opacity: 0;
}
.project-methodology-wrap .methodologyBullet::after {
  content: '';
  width: 12px;
  height: 12px;
  background: #d4272e;
  position: absolute;
  border-radius: 30px;
  left: 33px;
  top: 2px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before {
  opacity: 1;
  transition-duration: 0.5s;
  left: 26px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after {
  border: 5px solid #fff;
  width: 21px;
  height: 21px;
  left: 28px;
}
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet {
  position: absolute;
  left: 0;
}
.project-methodology-wrap .project-methodology-leftContent {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.project-methodology-wrap .project-methodology-rightContent {
  position: relative;
  overflow: hidden;
}
.project-methodology-wrap .project-methodology-rightContent:before {
  content: "";
  height: 100%;
  width: 8px;
  position: absolute;
  background-color: #f1f2f6;
  left: 35px
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list {
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  padding-left: 80px;
  margin-bottom: 3rem;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent {
  opacity: 0.2;
  transition-duration: 0.4s;
  -webkit-transform: none;
  transform: none;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent {
  opacity: 1;
}

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="./index.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>
    
    <section class="project-methodology-wrap">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="project-methodology-leftContent">
                        <div class="pr-5">
                            <h2>title</h2>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
                            </p>
                        </div>
                        <img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">

                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="project-methodology-rightContent pt-5">
                            <div class="project-methodology-list">
                                <div class="methodologyBullet">&nbsp;</div>
                                <div class="project-methodology-listContent">
                                    <h4 class="project-methodology-listCount">1</h4>
                                    <h4>
                                       Title
                                    </h4>
                                    <p>
                                       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.

                                    </p>
                                </div>
                            </div>
                            <div class="project-methodology-list">
                                <div class="methodologyBullet">&nbsp;</div>
                                <div class="project-methodology-listContent">
                                    <h4 class="project-methodology-listCount">2</h4>
                                    <h4>
                                       Title
                                    </h4>
                                    <p>
                                       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.

                                    </p>
                                </div>
                            </div>
                            <div class="project-methodology-list">
                                <div class="methodologyBullet">&nbsp;</div>
                                <div class="project-methodology-listContent">
                                    <h4 class="project-methodology-listCount">3</h4>
                                    <h4>
                                       Title
                                    </h4>
                                    <p>
                                       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.

                                    </p>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
 

</body>

</html>
Apply media query style to media print?

Apply media query style to media print?


By : user4886934
Date : March 29 2020, 07:55 AM
To fix the issue you can do I have a CSS document with partly "normal" css and some changes that are made to the css when the window is being resized: , Just add a comma followed by print to your @media rule like so:
Related Posts Related Posts :
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • Sublime Autocompletion for HTML using Emmet inside .sublime-autocompletion file
  • Align bottom wrapped text at the left of an image
  • I'm trying to get :after:hover to work
  • Header and Picture won't Display Correctly
  • SVG stacking, anchor elements, and HTTP fetching
  • Positioning two elements on opposite ends of a 100% with header
  • How to overlay an image inside an image with HTML, CSS
  • Selected date isn't kept in select box
  • How to change background colour of entire div on hover?
  • Two gradients with two distinct sections with just one div element
  • Indent even rows of hexagons in CSS
  • Unwanted filled letters in webpage
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org