I'm trying to move from Bootstrap to Foundation, but I'm having an issue in trying to identify how to exactly change the breakpoint for the topbar in Foundation. I'm using a a CDN version of the minified CSS for Foundation, so I do NOT have access to the settings SASS file to modify this. Is there a quick CSS override workaround? So far my searches on here, and Google, haven't turned up a working solution.
Import another CSS file below the minified Foundation CSS that will target the topbar
<link rel="stylesheet" href="foundation-min.css">
<link rel="stylesheet" href="override.css">
So, for example, if .topbar has margin: 1px; override it on override.css by setting another margin: 2px; attribute there.
This post will help
https://stackoverflow.com/a/31511646/6294600
Have you checked this one https://zurb.com/university/lessons/change-foundation-s-default-breakpoints
EDIT: a hint here...
look for the .show-for-medium class... I hope you know what to do after that... Don't give up...
#media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
#media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
#media screen and (min-width: 40em) {
.hide-for-medium {
display: none !important; } }
#media screen and (max-width: 39.9375em) {
.show-for-medium {
display: none !important; } }
#media screen and (min-width: 40em) and (max-width: 63.9375em) {
.hide-for-medium-only {
display: none !important; } }
#media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
.show-for-medium-only {
display: none !important; } }
#media screen and (min-width: 64em) {
.hide-for-large {
display: none !important; } }
#media screen and (max-width: 63.9375em) {
.show-for-large {
display: none !important; } }
#media screen and (min-width: 64em) and (max-width: 74.9375em) {
.hide-for-large-only {
display: none !important; } }
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
.show-for-large-only {
display: none !important; } }
These parts can be found in
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css
Change the values, I hope this answers the question. Happy Coding...
LAST BIT OF INFO:
change the min-width size
#media screen and (min-width: 64em) {
.top-bar{
display:none;
}
}
Related
I have an issue with media query. I tried to reproduce it on fiddle without success. So sorry if you have not a fiddle. As I have been searching quite a lot of time, I only expect from you to give me ideas how to resolve it.
I have those media queries
#media (min-width: 576px) {
input, textarea, .invalid-feedback {
width: 22vw;
}
}
#media (min-width: 768px) {
input, textarea, .invalid-feedback {
width: min(16.66vw, 200px);
}
}
When I display my screen with a width of 782px and lower, the media query #media (min-width: 576px) is taken into account, which is not normal. Do you have an idea ?
EDIT
I think there is a problem with media queries. I tried the following
#media (min-width: 576px) {
input, textarea, .invalid-feedback {
width: 22vw;
}
body {
background-color: red !important;
}
}
#media (min-width: 768px) {
input, textarea, .invalid-feedback {
width: min(16.66vw, 200px);
}
body {
background-color: green !important;
}
}
and I can't see a background color red or green when I have a size of 779px
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
I have a <p class="right"> in my Zurb Foundation-based layout. But I don't want it to float right on small screens. Is there a built-in solution in Foundation? Or do I have to create my own class for it?
Thanks in advance!
No, there isn't. In accordance to this you have to create your own class (or classes).
One class for #medium-up screens
SCSS
.medium-right {
#media #{$medium-up} {
float: right !important;
}
}
Compiled CSS (with default Foundation breakpoints)
#media only screen and (min-width: 40.063em) {
.medium-right {
float: right !important;
}
}
HTML (usage)
<p class="medium-right">
Class for every screen size
If you want to generate right classes for every screen size, you can use something like this:
SCSS
#for $i from 1 through length($align-class-names) {
#media #{(nth($align-class-breakpoints, $i))} {
.#{(nth($align-class-names, $i))}-right { float: right !important; }
}
}
Compiled CSS (with default Foundation breakpoints)
#media only screen and (max-width: 40em) {
.small-only-right {
float: right !important;
}
}
#media only screen {
.small-right {
float: right !important;
}
}
#media only screen and (min-width: 40.0625em) and (max-width: 64em) {
.medium-only-right {
float: right !important;
}
}
#media only screen and (min-width: 40.0625em) {
.medium-right {
float: right !important;
}
}
#media only screen and (min-width: 64.0625em) and (max-width: 90em) {
.large-only-right {
float: right !important;
}
}
#media only screen and (min-width: 64.0625em) {
.large-right {
float: right !important;
}
}
#media only screen and (min-width: 90.0625em) and (max-width: 120em) {
.xlarge-only-right {
float: right !important;
}
}
#media only screen and (min-width: 90.0625em) {
.xlarge-right {
float: right !important;
}
}
#media only screen and (min-width: 120.0625em) and (max-width: 6249999.9375em) {
.xxlarge-only-right {
float: right !important;
}
}
#media only screen and (min-width: 120.0625em) {
.xxlarge-right {
float: right !important;
}
}
I use Foundation without compiled SCSS as part of my toolchain.
For this situation, I've addressed this issue by adding some simple logic to my application Javascript that's included with every page:
app_stuff = {
resize_handler: function (event) {
if (window.matchMedia(Foundation.media_queries['small']).matches)
{
$(".medium-up-text-right").removeClass("text-right");
}
else
{
$(".medium-up-text-right").addClass("text-right");
};
}
}
:
$(window).resize(Foundation.utils.throttle(app_stuff.resize_handler, 10));
(This is an edited version of my actual code, untested. The full code is at https://github.com/gklyne/annalist/blob/master/src/annalist_root/annalist/data/static/js/annalist.js, and the corresponding Django master page template is at https://github.com/gklyne/annalist/blob/master/src/annalist_root/annalist/templates/base_generic.html - relevant includes are at the end of the template.)