I'm trying to make my website somewhat responsive by using media queries however they don't seem to be working.
Here is what it is supposed to look liked:
http://mobt.me/3tPS
And here is the actual website:
http://sandbox.rdonohue.ca/
But when I pull up the actual website on my phone I see the full website except the websites name is centered. I searched for the media query for iPhone 5 so I could see what it looks like but like I said it doesn't appear to be working.
Here is my CSS:
#media only screen and (min-device-width : 320px){
.titleName {
text-align: center;
padding-left: 0px;
}
.landingImage {
height: 200px
}
.mainContentTitle {
text-align: center;
width: 100%;
}
.mainContentTitle h5 {
padding-left: 10%;
}
.mainContentSnippet {
width: 90%;
}
}
Ryan
Here is the iPhone5 media query:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
You may also need to target the pixel density as well for retina screens:
-webkit-min-device-pixel-ratio: 1.5
min--moz-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2
Also double check that there is no css after the media query that would override it.
Related
I am including two picture of the same section to illustrate what's happening on the website when I drag the screen to a smaller size. I am hoping to use the media queries to prevent such a thing from happening. Dragging the screen size smaller is changing the text and the size of the elements pictured. When I input the media queries into custom css, I see nothing change and my goal is to have the screen size look very similar across all screen sizes that use the website.
Before dragging screen to smaller size:
enter image description here
After dragging screen to smaller size:
enter image description here
/*For browser/screen widths less than 768px*/
#media screen and (max-width: 1440px) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-height: 900px){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 900px) and (orientation: portrait) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 1440px) and (orientation: landscape){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
I've tried multiple css media query styles and I have not seen any changes to any pages of the website. Please help me to assess what I am doing wrong. I am exploring all options to make this website responsive. The divi builder only provides three options, desktop, tablet and mobile for screen sizing. I need more screens recognised which is why I am using custom css for this project. I have noticed especially on macbook air that the screen size is having multiple issues accommodating the size of elements on each page. Some images are cutoff on pages and some are turning into different weird sizes that were not intended to do so.
Thanks in advance!
I have written the below media query to target screen resolutions 2560px and higher
#media screen and (min-width: 2560px) {
.singleVideoPlayerScreen .customVideoControls--box--Left {
width: 14%;
}
}
And this is my screen resolution:
But when I check in my Macbook then the media query rule is not getting applied and if I change the code as follows:
#media screen and (min-width: 1920px) and (max-width: 2560px) {
.singleVideoPlayerScreen .customVideoControls--box--Left {
width: 14%;
}
}
then the CSS is getting applied to the screen with 1920px resolution but still not in the 2560px resolution.
Please advice
BTW I have already checked these answers and it didn't help:
SO question link 1
SO question link 2
I've been tasked with developing a wordpress site for my company with almost 0 web development experience. I've been fiddling with CSS a bit and I've come up with this steaming pile of trash.
Anyways, I only need to develop it for 3 resolutions (Company standards). However, auto-scaling websites are complete magic to me. So I've decided to hardcode elements for each of 3 specific resolutions (1920x1080, 1440x900, 1024x768).
Here's the code:
768 Users
#media (min-width : 768px)
{
.sidebar
{
right: 115px;
bottom: 40px;
}
}
900 Users
#media only screen and (min-width : 900px) and (max-width: 900px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
1080 Users
#media only screen and (min-width : 1080px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
Diagram
Question:
The issue is, the hardcoded scaling I've done only works for
the /768 Users/ and the /1080 Users/.
Every change I make in the /900 Users/ section does nothing, how do I fix that?
In your code, (min-width : 900px) and (max-width: 900px) will only target a width of exactly 900px, which is not desirable.
One technique is to use a "mobile-first implementation" in which you start with the smallest size first and work your way up. Think of it as styling for the smallest viewports first and then adding to those styles for increasingly larger viewports.
For example:
/* start with smallest "mobile viewport" styles here, as a default */
#media (min-width : 768px) {
/* add styles for 768px and up */
}
#media (min-width : 900px) {
/* add styles for 900px and up */
}
#media (min-width : 1080px) {
/* add styles for 1080px and up */
}
You might find this article informative: An Introduction to Mobile-First Media Queries
#media only screen and (min-width : 900px) and (max-width: 900px) meaning from 900px to 900px.... so nowhere at all.
If I understand your problem correctly, this should work:
#media only screen and (min-width : 900px) and (max-width: 1080px)
Your going to use CSS3 media queries to essentially define each viewport you are supporting; and from within write your styles per. There a few ways to call this - but I've found the below the simplest to test starting out... You will also have to make sure your meta viewport tag from within the HTML doc is properly defined.
#media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}
I have a drop-down menu for mobile units that's working fine, I have also set up a media query for tablets where the code is slightly different. Its this part of the code that not showing up at all when on tablet screen widths.
The default for the menu drop-down is set at margin-top: 52px; on line 524 in style-sheet.
For the tablet I have set up the following code:
#media only screen and (min-width: 481px) {
.flexnav-show {
margin-top: 0px; }
}
on line 630 in style-sheet. This part of the code is never implemented at all.
This is the website I am trying to make it work on.
Thanks,
Sohail
Try to use min-device-width
#media all and (min-device-width: 481px) {
.flexnav-show {
margin-top: 0px; }
}
The website that I'm working on has a background image and a separate header image, and I'd like to use media queries to get them as well the text on the header image to resize appropriately for different screens. I've played around with a lot of options based on different tutorials, but I still don't think my stylesheet is working as it should be. Here's an example of my css:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
img {max-width: 90%;}
#wrapper { max-width: 90%; }
#wrapperbg { max-width: 90%; }
#header { max-width: 90%; }
#navlist { max-width: 90%; font-size: 80%; font-family: agency,
sans-serif; }
#navlist2 { max-width: 90%; }
#navlist li {max-width: 10%; font-size: 1.5em; font-family: sans-serif; }
}
I've included the line in the header as well:
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
I'm fairly new to trying to use media queries for a responsive design, so I know I'm making some ignorant mistake. Any help would be very appreciated. Thank you.
I think it should be
#media screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)
{
//...
}
For more see this.
I had problems using media queries with a wordpress theme, and I fixed it by downloading a special plugin for mobile phones and creating style sheets that way. It is just called "mobile css". I actually created media queries within the plugin for things like landscape vs. portrait on the iPad, etc.