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.
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
I have created a responsive website using Swiper. I have used #media queries in my css to fit different screen size and orientation.
Initially, I have 1 main css, 1 landscape css and 1 vertical css. I imported two orientation css into main css. Only main css is in html file. The website works fine with all screen sizes. The css snippet regarding the media is as below:
#media screen and (orientation:landscape) and (min-width:700px) {
#media screen and (orientation:landscape) and (min-aspect-ratio:16/10) {
#media screen and (orientation:portrait)
Then I read about not using import for css so I cat all .css into one file. I also deleted the two #import lines. Then the website does not work properly. Specifically, all elements on small screens return to normal size. I checked the css structure: these elements lose their style enclosed in #media {} thus inherent from their parent css.
The fiddle with all the code is here. It's not working because it supposes to grab local image files.
The working website with separate css files is this. It's on Github so you can see the source files easily.
I am really new to css so this might be due a stupid mistake..
Use these media screen for tablet and mobile if you are not importing hopefully it will help Thank's
beside your fiddle shows this on top }//]]> i dont know why might be js issue or some text in body
#media only screen and (max-width: 1024px){}
#media only screen and (max-width: 768px){}
#media only screen and (max-width: 767px){}
I want to develop a responsive web page using media queries.
I have also wrote media queries for mobile, tables & desktops.
But i am not able to understand that if I am writing the set of css code for device max-width:320px , then same code i have to write again for another device i.e 640px with difference sizes.
I am confused whether this is the correct way of writing media queries as i am writing the same set of css code for each & every device size again & again.
Please help me to proceed furthur as i am new to media queries.
And also i am confused whether to go for adaptive layout or responsive layout?
That's great of you & I appreciate the helpful answers given by you all.
I have given a task by company where they told me that i cannot use any frameworks for designing responsive webpage, I only have to use media queries for this.
This might clear all your doubts.This framework makes your work a lot easier. http://getbootstrap.com/
Hope it helps.
With the media queries you're telling to your code -Bro if the width if bigger than this "size here" (320px, 240em whatever....) then use this piece of code.
else if "next bigger size here" then use this other piece of code, and the same with the next #media queries
There is two ways to use it.
Coding thinking in mobile first (ULTRA MEGA recommended) or not :)
This mean, you create code for the small browser and then start adding mediaqueries for phablet, tablet and then desktop and wide screen.
This is so useful because help you to add in the page only the really important content and avoid the useless ton of information. because you started designing the small size and have to compress all the usefull info and put inside :)
Learn more about mobile first technique
#media (min-width: 320px) {
nav li {
display: inline-block;
}
}
The idea of media queries and of cascading style sheets in general is to progressively enhance your as you go forth.
This means: start your design aiming at mobile. Once done with that add a media query for your next bigger targeted viewport size.
In this query overwrite all styling that needs to be different for this viewport.
And so on ...
Want you do not want to do is writing all styles again an again.
Check out some popular frameworks to get inspiration like twitter bootstrap, html boilerplate or foundation framework.
If the design is the same, lets say for desktop to large wide monitors, we can do something like
#media screen and (min-device-width: 800px) and (max-device-width: 2048px) {
/* STYLES HERE */
}
supposing you want the same design for every desktop screen. This will help you cutting the code down and not rewriting it.
the below example you can understand than it is essay to understand the media queries.
1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work.
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths.
basic break point: 320px -mobile size
480px -mobile size, 640px -mobile size,
768px -heigh-end phones,
1024px - pad.
as remain widths may be seems to work in desktop width.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
hope you get one idea if you read clearly.
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!