I have a problem using "media query". It never works for me and I searched many times and can't find the solution.
here is the code below and I am trying to increase the font size from 44px -->> 70px in small devices (576px max-width)
CSS👇🏾
/*main title style*/
.title {
font-size: 44px;
font-weight: 700;
}
/*media query title styling*/
#media screen and(max-width: 576px) {
.title {
font-size: 70px!important;
}
}
Html 👇🏾
<div class="container">
<div class="row">
<div class="content col-lg-6 col-sm-12">
<h1 class="title mb-3">Host your website in less than 5 minutes.</h1>
</div>
</div>
</div>
I tried using both "#media screen and(max-width: 576px)" and "#media (max-width: 576px)"
I also used the class "fs-sm-1" brought from bootstrap library but it was too small for me.
I expect the font size to increase from 44px >> 70px in small devices
you just need to put a space between 70px and !important. and also between and and (max-width: 576px).
/*main title style*/
.title {
font-size: 44px;
font-weight: 700;
}
/*media query title styling*/
#media screen and (max-width: 576px) {
.title {
font-size: 70px !important;
}
}
<div class="container">
<div class="row">
<div class="content col-lg-6 col-sm-12">
<h1 class="title mb-3">Host your website in less than 5 minutes.</h1>
</div>
</div>
</div>
I also noticed that I did not add the proper tag so that "media queries" work.
make sure you add the
<meta name="viewport" content="width=device-width, initial-scale=1.0">
so your media queries work
Related
I am trying different things to adjust the margin left for mobile (different)screen size. I am setting margin according to medium screen size using margin-left. And want to adjust for small screen size. Generally which method is useful and papular. Nothing is working in my case.What is wrong?
Can someone explain it with example. I am able to adjust screen size for column grid. But heading and header and footer is the issue. If I give heading and make it horizontal-align using margin left. How to change it for different size screen? What is wrong?
1)Do I need to add different style tags for each of them(mobile and medium size using media query. It is not working.)
2)I trying to add class visible-xs and add mobile-margin (h1 view on mobile)
3)Add bootstrap utility class (h1 Utility class)
<script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- font awsome -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</script>
<style>
.read{
width:300px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 50px;
padding-top: 8px;
margin-left: 400px;
margin-top: 100px;
}
.learn{
width:300px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 50px;
padding-top: 8px;
/* margin-left: 400px;*/
/* margin-top: 300px;*/
}
.mobile{
width:400px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 100px;
}
.mobile-margin{
margin-left: 50px;;
}
#media only screen and (min-width : 320px) {
margin-left: 50px;
}
#media only screen and (min-width : 768px) {
margin-left: 400px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="read">Read more</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 ml-md-4 ml-sm-1">
<h1 class="learn">Utility Class</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="mobile-margin visible-xs">
<h1 class="mobile">view on mobile</h1>
</div>
</div>
</div>
</body>
You can try Bootstrap classes to adjust according to the screen sizes. First set a default (mobile) and then change using md or lg:
<div class="row">
<div class="col-md-3 ml-0 ml-lg-5">Margin Test</div>
<div class="col-md-3 ml-0 ml-lg-3">Margin Test</div>
</div>
margin-left is set to 0 for mobile screens and margin-left is set to 5 for large screens
I give you an example of a heading H1 element.
First make sure to add bootstrap css link correctly to your page.
In bootstrap you can use the m class for margin and the p class for padding. In addition you can optionally set the side on which you want to apply margin or padding. Use ml for example to set margin left. You can give it a value between 0 and 5. For example, ml-3. You can also specify multiple values for multiple screen sizes as shown in the below example:
<h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>
In this example, the heading element will have a margin of 5, it will change to 3 when screen size reaches medium and it will change to 0 when screen size reaches large.
All you have to do is give the class name in the media screens.You haven't given your class name and just given margin-left
#media only screen and (min-width : 768px) {
margin-left: 400px;
}
You can specify the name like this
#media only screen and (min-width: 320px) {
.read {
margin-left: 50px;
}
}
#media only screen and (min-width: 768px) {
.read {
margin-left: 400px;
}
}
You can center the heading through
<h4 class="text-center">
<h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4>
<h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4>
<h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4>
and for buttons centering
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
I have a page title <h1> MY JOB </h1> with a font size of 70px. I want to automatically change the size of the title to font size 36px when the page reaches a small breakpoint (mobile phone).
How can I achieve this?
Here is what I have done so far:
.title-extra-large-5 {
font-size: 70px !important;
line-height: 80px;
}
#media (max-width: 767px){
.xs-title-extra-large-4{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
<h2 class="title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4">MY JOB.</h2>
</div>
</div>
</div>
In your question, you mention that your title is h1, but, in your example, you use h2.
Apart from that, you are on the right track. You just need to change couple of things:
h2 {
font-size: 70px !important;
line-height: 80px !important;
}
#media (max-width: 767px){
h2{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8">
<h2>MY JOB.</h2>
</div>
</div>
</div>
You do not need to refer to col-sm-12 and col-xs-12 as bootstrap will render into them by default. And you do not need to have extra classes title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4 you can just refer to h2 or h1.
I'm assuming by certain screen size, you want to change it, right?
ACCORDING TO W3SCHOOLS.COM
You can use the #media property to display a certain set of styles in a certain situation.
body{
background-color: blue; /*For screens with more than 480px screen width.*/
}
p{
font-size:72px;
}
#media screen and (max-width: 480px) { /*Same but for less*/
body {
background-color: lightgreen;
}
p{
font-size:36px;
}
}
Comparing this to your code, I'd say you've got it mostly correct, but be leniant on !important. This can conflict with other styles, so only use it when you do NOT want it to change, or the style won't be applied otherwise.EDIT: It seems you have two classes which do the exact same thing, but conflict with each other due to !important. I'd say just keep one of the classes and change the styles with #media so you're gauranteed it'll work and that it won't conflict with other styles.
I have two divs centred side-by-side using bootstrap. One div is text-right aligned and the other text-left. I'm trying to get it so that these become centred on top of each other when the page becomes to small to view them side by side. I have tried using #media rule in CSS to deal with this but with no luck. Any suggestions? The HTML so far looks like this:
<div class="container-fluid">
<div class="col-md-3 col-md-offset-3 text-right">
<p class="summary">Some summary text</p>
</div>
<div class="col-md-3 text-left">
<p class="description">An extended description</p>
</div>
</div>
UPDATE!
The CSS relating to the two divs:
/* Summary text */
.summary {
font-family: 'Stint Ultra Expanded', cursive;
font-size: 1.5em;
color: #ffffff;
text-transform: uppercase;
opacity: 0.8;
}
/* Description text */
.description {
font-family: 'Slabo 13px', serif;
font-size: 1.1em;
color: #ffffff;
opacity: 0.8;
}
#media screen and (max-width: 300px) {
.summary,
.description {
text-align: center;
}
}
300px max width is far too smaller to trigger. If you're using .col-md-3 then the two columns will occupy the full screen width starting at 992px and lower. See the Bootstrap Docs on Media Queries
#media (max-width: 992px) {
.summary,
.description {
text-align: center;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-md-3 col-md-offset-3 text-right">
<p class="summary">Some summary text</p>
</div>
<div class="col-md-3 text-left">
<p class="description">An extended description</p>
</div>
</div>
If you want to go even smaller than 992px, you can use .col-sm-3 or .col-xs-3 or even come up with your own custom column widths by wrapping them in a media query.
Give an id to your columns as this will be more specific in your css and overwrite the Bootstrap css.
<div class="container-fluid">
<div id="column-one" class="col-md-3 col-md-offset-3 text-right">
<p>Some summary text</p>
</div>
<div id="column-two class="col-md-3 text-left">
<p>An extended description</p>
</div>
</div>
CSS:
#media screen and (max-width: 300px) {
#column-one, #column-two {
text-align: center;
}
}
I'm trying to apply a #media query so when the max-width reach 991px a padding-left will be added to the class, but nothing happens when the max-width reach 991px and the main of the page start to wrap under the aside, I'm using bootstrap and here is a part of the Code :
CSS
#media(max-width : 991px) {
.mainIcon {
padding-left: 47px;
}
}
HTML
<section class="mainin">
<div class="container-fixed mainIcon">
<div class="row mainFoto">
<div class="col-md-4">
<img src="images/code_big.png" alt="">
<a class="boutonCode">Code</a>
</div>
<div class="col-md-4">
<img src="images/tutoriel_big.png" alt="">
<a class="boutonTutoriel">Tutoriels</a>
</div>
<div class="col-md-4">
<img src="images/foucha_big.png" alt="">
<a class="boutonfoucha">PROJECTS</a>
</div>
</div>
<header class="globalTitle">
<h1 class="title">Turn Your Brean <span>On</span></h1>
<h2 class="subtitle">design the future</h2>
</header>
</div>
</section>
LIVE DEMO
when i inspect the page and try to reduce the width of the browser once he is less than 991px i see that the padding-left is not applied , i can't figure out how to fix this !
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:
.mainIcon {
width: 99%;
padding-top: 14%;
padding-left: 20%;
}
#media (max-width: 991px) {
.mainIcon {
padding-left: 47px;
}
}
#media only screen and (max-width: 991px)
{
.mainIcon {
padding-left: 47px;
}
}
or use !important
padding-left: 47px !important;
Can anyone tell me how to ensure I get white space/margin on the left hand side and right hand side when the page is viewed on a mobile phone?
My CSS is:
#maxCostSlider {
max-width:304px;
width:304px;
padding:0px;
margin-left:-6px;
}
#media (max-width: 480px) {
#maxCostSlider,#sliderScale {
margin-left: 20px;
margin-right: 20px;
}
}
HTML is:
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive" />
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-4 col-md-4">
<input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" />
</div>
</div>
</div>
This all looks good on a desktop and an iPad but when viewed on an iPhone the bootstrap-slider widget spans the entire width of the device. I would like to ensure there is always a margin of at least 20px either side of the two rows. Ideally the bootstrap-slider would scale to fit.
Hard to tell without know the exact slider component you are using, but adding this to your CSS should work:
#maxCostSlider {
margin-left: 20px;
margin-right: 20px;
}
However if you only want that to happen at mobile width, wrap it in a media query:
#media (max-width: 480px) {
#maxCostSlider {
margin-left: 20px;
margin-right: 20px;
}
}
For small device(sm) and extra small device (xs) you can call them separately.
<div class="col-sm-offset-1 col-xs-offset-1 col-md-offset-4 col-md-4"></div>
And another way you can do this by css.
#media (min-width: 240px) and (max-width: 480px) {
#max-cost {
padding-left: 20px;
padding-right: 20px;
}
}