I am missing something really simple here so hopefully somebody can unspin my brain.
I have a page layout working OK but on applying the media breakpoints nothing changes. Below is an example of my CSS. You can see I am just altering the font size to try and get the thing working but nothing changes when altering the browser width. The p font remains the same size regardless of the browser width.
Importantly - the regular Bootstrap responsiveness and page layout does happen, my own media instructions do not.
p {
font-size: 16px;
}
#media (min-width: 576px) {
p {
font-size: 116%;
}
}
#media (min-width: 768px) {
p {
font-size: 108%;
}
}
Another example is a carousel I have added. The media instructions only involve the height of the carousel. But like the example above - the carousel height remains the same no matter the broswer width.
#carouselMain {
height: 460px;
}
#media (min-width: 576px) {
#carouselMain {
height: 660px;
}
}
#media (min-width: 768px) {
#carouselMain {
height: 560px;
}
}
Thanks. I don't know why this should happen. A similar question has been asked before but the given answer doesn't seem to apply to this question.
Have you tried using the !important after the property?
Like this:
#media (min-width: 576px) {
p {
font-size: 116%!important;
}
}
Give <p> an id and then add this to the CSS stylesheet:
#media (min-width: 400px) {
#p{
color: red;
font-size:24px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid">
<p id="p">P media</p>
</div>
Or use! Important w3.org (info)
#media (min-width: 400px) {
.container-fluid > .p{
color: red;
font-size: 34px!important;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid">
<p class="p">P media</p>
</div>
Like those often missed dashes and slashes the problem was poor syntax in the CSS immediately before my breakpoints and so the breakpoints weren't being processed properly. I'm clocking out for the next two and a half days.
Related
So, I'm trying to use #media in CSS on my rails project.
I have a text which needs to be displayed only on mobile Heres the code
a.html.erb
<div class="A__b--c-d">
<%= link_to .......
....
</div>
b.scss
div.A__b--c-d {
display: none;
}
#media only screen and (min-width: 200px) and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
I cannot seem to get the text displayed on mobile.
Heres what ive tried so far.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pasted this in Chrome inspect element
All the names are right
You need to remove the .div and just select the max-width in your media query.
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
You made a mistake in your media query. Try this
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
This may be a beginner question concerning CSS.
Is it possible to decide what to to print (dispay) using CSS and media queries?
Say for example if my window (or device screen) is smaller than 500 pixels then dispay "Hello!" otherwise dispay "Guten Tag!"
What I have found shows how to decide some display attribute (color or ...), never the contents itself.
You can use a pseudo-element with content:
p::before{ content: 'foo' }
#media (max-width: 500px){
p::before{ content: 'bar' }
}
<p></p>
JSFiddle
You'd need to have two elements, one for screen bigger than 500 and one for less than 500. Then use media queries to show/hide one on them
DEMO: http://jsbin.com/pizosehire/edit?output
HTML
<div class="large">Hello</div>
<div class="small">Guten Tag</div>
CSS
.small {
display: none;
}
#media (max-width: 500px) {
.large {
display: none;
}
.small {
display: block;
}
}
You will need to work with media-queries.
You can change your css to something like this
#media (max-width: 500px){
#mydiv{ background: url('img-sx.img') }
}
#media (min-width: 501px){
#mydiv{ background: url('img-s.img') }
}
I need to set a height on a div and i would like to set it relative to the device screen.
For ie :
/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }
/*Small devices Tablets (≥768px)*/
.myClass { height: 400px; }
/*Medium devices Desktops (≥992px)*/
.myClass { height: 600px; }
/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }
Edit: Improved example at CodePen.
I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :
function isMobile() {
return $('.device-xs').is(':visible');
}
Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:
if( isMobile() ) {
$('.someClass').css('property', 'value');
}
#media screen and (max-width: 768px){
.myClass{
height:200px;
}
}
Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:
This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.
.myClass {
height: 200px; /*default extra small*/
#media (min-width: 768px) /*small*/
{
height: 400px;
}
#media (min-width: 992px) /*medium*/
{
height: 600px;
}
#media (min-width: 1200px) /*large*/
{
height: 800px;
}
Look at media queries.
#media (max-width: 768px) {
.myClass {
display: none;
}
}
#media (max-width: 992px) {
.myClass{
display: none;
}
}
#media (max-width: 1200px) {
.myClass{
display: block;
}
}
Use the viewport width and height after declaring the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:
.myClass { height: 30vh; }
You'll also need to define default class, for example screen size - greater than 1200px
/*Extra small devices Phones (<768px)*/
#media only screen and (min-width:768px){
.myClass { height: 200px; }
}
/*Small devices Tablets (≥768px)*/
#media only screen and (max-width:768px){
.myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/
#media only screen and (max-width:992px){
.myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
#media only screen and (max-width:1200px){
.myClass { height: 800px; }
}
I have used the following css code to decrease the font size of a slider heading:
.swiper-slide .content h2 {
font-size:48px;
}
It seems to have worked fine when viewed from a desk or laptop, but the text is over sized when viewed on a smart phone.
I am using windows 7 on a PC, wordpress CMS, responsive theme...
Using font-size in % should help you to change size relatively. But you should keep in mind line-height property.
You could try media queries?
html { font-size: 62.5%; }
body { font-size: 1em;}
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Try this :) http://jsfiddle.net/yv5eu/
Try this technique for better resizing of text. Than with media queries you can set different font sizes.
http://snook.ca/archives/html_and_css/font-size-with-rem
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
Support: http://ahedg.es/w/rem.html
I got a problem with website.
It's a jquery mobile framework, and the responsive design works well in Chrome and Firefox, but it does not in Safari on the mobile view.
i inspect it and looks like thet the media queries bellow 600px doesnt work.
Could you give me any help?
i wanna try whit some hacks but i dont know how to use it in media queries.
#media screen and (max-width: 320px){
.mi-slider {
text-align: center;
height: auto;
}
.mi-slider ul {
position: relative;
display: inline;
bottom: auto;
pointer-events: auto;
}
*/much more styles*/
}
Sorry for answer my own question, but i could fixed it, was easy, just making a new .css for hacks:
<link rel="stylesheet" href="css/webkit.css" media="screen and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
and there put the media queries
#media screen and (max-width: 1024px){
#text_biblioteca {
margin-left:24.553954%;
}
#image2_biblioteca {
margin-left:24.165918%
}
#box2_biblioteca {
margin-left:7.57416%
}
}
and done!!!