Hi I'm trying to make my site responsive. Now I have a media query that handles a certain screen size of devices but a different styling when viewing via web. It works just fine in chrome, safari and opera. But when trying in mozilla it seems that my media query is being executed eventhough I'm accessing it via desktop. Is there anything that I'm missing? Below is my media query
.my-target-class {
display: inline;
}
#media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){
.my-target-class {
display: block;
}
}
As you can see I'm targetting a clas and display is change if its being viewed via mobile. But upon viewing on mozilla its running the #media screen query and applying ng display: block on the class. Any idea or fix for this? Would appreciate if explanation on why its behaving like this
As you can see on the lower right part of the screenshot it's applying the css styling meant for mobile. Eventhough I'm acessing it via a desktop browser. I assume that if I place #media only screen this will only be applied when viewing on mobile. But it seems firefox is behaving differently
Don't put outside your code. You have to wrap to your screen size for desktop also like this
#media screen and (min-device-width: 300px) and (max-device-width: 800px){
.my-target-class {
display: block;
}
}
#media screen and (min-device-width: 801px) {
.my-target-class {
display: inline;
}
}
Related
I have been doing a lot of research for days already on why this problem persists. So here it goes.
I have applied CSS media queries for smartphones. It works perfectly fine in the browser device simulator and the actual smartphone itself. But my client checks it differently, he resizes the browser. Unfortunately, the CSS media queries do not apply to the browser which breaks the entire layout.
My client insists to fix the breaks in browser resize but if I do this, it breaks the smartphone layout.
I have already added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And this is how I declare my queries:
#media only screen and (max-width: 767px)
{
...
}
#media only screen and (max-width: 360px)
{
...
}
Now, to fix the client's demand I have added something like this
#media only screen and (max-device-width: 767px) to target specifically the smartphones.
For me, this isn't an efficient fix to what's happening. I just want to know where did it all go wrong and why the browser is not reading all my CSS media queries. I am hoping for an answer soon.
You must have some other error in your CSS or HTML. If I add your mediaqueries to a normal CSS file it get's used by the browser if you resize the browser.
See the following snippet to see how the background color of the page changes based on width.
body {
background-color: blue;
}
#media only screen and (max-width: 767px) {
body {
background-color: green;
}
}
#media only screen and (max-width: 360px) {
body {
background-color: pink;
}
}
<p> TEST CONTENT </p>
So my website looks great on Desktops having a display resolution of 1920x1080 or higher. It's an e-commerce website so I am having a lot of elements on product pages.
The problem is when viewed on Desktop or Tablets with resolution 1366X768 or less, a lot of these elements doesn't show up so users have to scroll down the page to view those elements. I fear that some users may not even notice these elements and I will potentially lose customers.
So, I thought why not scale down the webpage to around 75% so that all of the elements fit without scrolling and with little googling around I found this CSS code.
#media screen and (max-width: 1366px) and (max-height: 768px) {
html {
zoom: 0.75
}
}
Now it runs great on desktops and tablets and I loved how my webpages just scale down to 75% with all the necessary elements on the screen right in front of the user without requiring them to scroll down the webpage.
But I noticed a huge problem with it when I opened my webpage on mobile. Those were also scaled down to 75% of their original dimensions. I don't want them to scale down on mobile. I need them as is. Any ideas how I can achieve this?
You can do like this. Its work for ipad to laptop screens. its target the browser screens.
#media screen and (min-width: 768px) and (max-width: 1366px) {
html {
zoom: 0.75
}
}
Or you can use this code. max-device-width is the width of the device's entire rendering area. same as height
#media screen and (max-device-width: 1366px) and (max-device-height: 768px)
{
html {
zoom: 0.75
}
}
You should use device width/height instead:
#media screen and (max-device-width: 1366px) and (max-device-height: 768px) {
html {
zoom: 0.75
}
}
This should suffice, zooms in for any screen above 768px in width(ipad and above):
#media screen and (min-width: 768px){
html {
zoom:0.75;
}
}
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
I am designing a personal page . I've been using Chrome Canary to make sure all my media queries were in line. Everything shows really well in Canary and all the desired device modes work properly. However, when I open my page on an iPad, iPhone, or Blackberry it doesn't display correctly. For mobile phones, everything below the Featured Work section does not display. For iPads, everything after "Featured Work" displays down a single column which spans 33.33% of the page width. I am not sure why.
The TL;DR of my question is: What am I missing in my HTML or CSS file that, when added, will help my pages display properly on iPads and iPhones??
In head of my HTML file, I use:
Initially, the only media query that I had was:
#media only screen and (max-width: 767px)
When I saw that didn't initially work on iPad and iPhone I added
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
When working within Chrome, I felt everything displayed properly until the images got to small (800px or so). There were some font size issues as the page got smaller. I restructure the bottom part of the page (below Featured Work) and do that using the "#media only screen and (max-width: 767px)" query.
I'm really stumped as to why everything is displaying oddly on my iPad. I've tried different display: (flex, inline, box), to address the iPad issue. All were to no avail.
For the iPhone issue, I've tried copying everything under the "#media only screen and (max-width: 767px)" and put it under the "#media only screen and (min-device-width : 320px) and (max-device-width : 568px)" query. But that didn't work.
I haven't attempted re-writing my entire CSS file. My thoughts are that since all these devices have predefined widths that I could adjust all my div widths to actual px values instead of percentages. However, I feel that is unneccessary work.
Try this: Edited to accommodate for the margins...
.projectdeets {
width: 100%;
height: 30%;
display: inline-block;
max-height: 300px;
}
.project {
width: calc(33.33% - 6px);
height: 100%;
margin: 0px 3px 0px 3px;
float:left;
}
I have this problem...I am running page http://exploreprague.cz. In the right upper corner I have ribbon. But when I am looking on it on my tablet, its's overlapping my menu. So I figured that if there is way to show different picture(different kind of ribbon, not just differently styled) it could work. But I don't know if there is some kind of HTML/CSS/JS trick which can do it. Thanks
One of the better ways to achieve what you want would be to use CSS3 Media queries.
In the CSS file targeted at tablet-sized resolutions, you could set display:none on that particular image, and replace it with a new image that fits in with your smaller resolution better if you prefer.
For example (iPad portrait/landscape resolution):
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#oldImg { display:none; }
#newImg { display:block; }
}
Here is an example of how to use a responsive css:
Large desktop
#media (min-width: 1200px) {
#largeImage{
display: inline;
}
#smallImage{
display: none;
}
}
Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) {
#largeImage{
display: none;
}
#smallImage{
display: inline;
}
}
Landscape phone to portrait tablet
#media (max-width: 767px) {
/* do the same as tablets or include this width range in the tablet style*/
}
Landscape phones and down
#media (max-width: 480px) {
/* do the same as tablets or include this width range in the tablet style*/}
Just set the image display property according to the width of the screen.
use 2 images one with
display: none;
and the other with:
display: inline;
and switch between them on a narrower screen