I was making a website, with this HTML and CSS files :
https://pastebin.com/Ldh12gt7 for HTML
https://pastebin.com/8igc0DXm for CSS
It renders perfectly on my browser, and also renders perfectly on other browsers, but on my PC.
My resolution is 1920x1080, and the website is shown there https://i.imgur.com/OOnhDSa.png
But, when a my friend tries to load it on a 1680x1050 resolution, the website appears to be like this https://i.imgur.com/gmSgAPx.png
How can I fix this? I already tried to this in many ways.
First, I setted all width and height with percentages.
Then, I used normalized.css(no effect, so I removed it).
So, I tried to set font-size with various values(vw, vh, ch, em etc. etc.) but didn't work.
Finally, I tried to catch user's resolution with #media and set zoom value: it worked but I can't do it for every resolution that exists.
Oh, also, my friend tried to set his resolution to 1920x1080, but nothing changed.
You should use media queries as:
Change the *value* accordingly.
To configure the CSS for the smaller screens then yours:
#media only screen and (min-width: *value*) {
.class_name{
//new CSS property
}
}
To configure the CSS for the larger screens then yours:
#media only screen and (max-width: *value*) {
.class_name{
//new CSS property
}
}
After that, you can check the responsiveness and view of your webpage on the different screen size devices using this application
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
My site(www.acweb.com.cy) is having a problem showing the navbar on the top right of the screen. When its resized on at the width of 768px its displaying both the "js-fh5co-nav-toggle fh5co-nav-toggle" and the regular navigation bar which is the horizontal for the bigger screens. So when its open on my small ipad is showing both the navbars.
Second off all i dont know much of sass and am using the koala program to edit the templates scss files. Additionally i removed all _(underscore) from the scss filenames cause koala wouldnt read the files. At last when am loading the site and opening the developer inspector within firefox the navbar is read as _navbar.scss instead of navbar.scss as i renamed it.
Thanks for the help!!
Your responsive media query codes are colliding at some places, you need to correct that. That's the reason both navbar are visible from 768px to 765px.
This is what your max-width and min-width are at present as below,
#media screen and (min-width: 768px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
You need to either increase or decrease any one of there width. You can make changes as below,
#media screen and (min-width: 769px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
So when its open on my small ipad is showing both the navbars.
iPads have a different pixel density than your normal computer monitor, this may be confusing when using css media queries and might even fool your css into thinking it's in a totally different media query.
I suggest checking out this site to get an idea of why your iPad is showing such a different website than your desktop/laptop:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
For more information about pixel density and specifically Apple's Retina display, this is where you need to be: https://en.wikipedia.org/wiki/Retina_Display
Quick workaround (not the best possible solution)
At the bottom of your main.js file, add this line after all the other methods:
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
So that your function will be:
// Document on load.
$(function(){
parallax();
burgerMenu();
clickMenu();
windowScroll();
navigationSection();
goToTop();
// Animations
homeAnimate();
introAnimate();
workAnimate();
testimonialAnimate();
servicesAnimate();
aboutAnimate();
countersAnimate();
contactAnimate();
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});
This will remove the general class when both of them are used for the navigation.
I have a media query:
#media only screen and (max-width : 729px) {
.playertracklist{
display:none;
}
}
but when i resize my window the css media query gets applied when the width reaches 657px. Im using Chrome and the scale of the window is correct meaning im not zoomed in or out.
If you want it to hide at 729px exactly you could try using width instead of max-width.
If you want it to hide from 729px and above(which would guess you'd want) it might be better to tell the CSS to start hiding above 729px, and not below, as you are doing now.
If you change
#media only screen and (max-width : 729px) {
to
#media only screen and (min-width : 729px) {
it should work.
As Marcel W, said you could leave the only part away. It makes small difference for newer browser, but it makes a big difference in older browsers.
The only part gets ignored by older user agents as they don't reconize the property, thus letting you hide that part of the stylesheet from them. A newer user agent just ignores it and continues with the rest of the media query. Meaning that it is up to you to decide if you will or won't use it. If you want more info over only check this link
I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
According to https://developer.mozilla.org/en-US/docs/Web/CSS/#import,
list-of-media-queries is a comma-separated list of media queries
conditioning the application of the css rules defined in the linked
url. If the browser doesn't support any of these media types, it won't
even load the linked resource.
So what I want to know is, if I have:
#import url('portrait.css') screen and (orientation:portrait);
does this mean that if or when I resize the width of the web browser on my desktop PC so the width is less than the height of the web browser, the portrait.css file will override the current style?
Or does it only load the portrait.css file on page load and if the viewport width is already less than its height?
http://www.hongkiat.com/blog/css-orientation-styles/
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}
so whenever width is less than height , this shall be a portrai , eventually will load your css file , even if the original screen was initialized at landscape.
That'll just make your imported css file to work on certain conditions. That's one of my favorite feature, too. For example, you have this piece of code:
body {
color:green;
}
When you import this using the conditional media query, for example orientation:portrait, your style will be 'modified' so that if the orientation is portrait, the color will change to green.
Quoting from csswg's documentation of the media query:
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A simple case is if you use a mobile browser, of course. Since the orientation is generally portrait. In the desktop, this would take effect if you resize the window, and thus changing the orientation.
An excellent example is here in this page