I'm styling a website and have some h3 headers and paragraphs that are wrapped in a div class named "featured-info".
Also i have a footer element that is in the main wrapper in the body.
The paragraphs are put in italic:
.featured-info p {
font-style: italic;
}
and the footer has a border:
footer {
border-top: 1px solid rgb(128, 128, 128);
}
Also the footer text is a h4 uppercased:
footer h4 {
text-transform: uppercase;
}
The main problem is that i have a setting:
#media screen and (min-width: 750px) that makes some navigation buttons inline and resizes some text but...
when the page size is smaller than 750px the footer styling and the italic font dissapears... and i don't understand why. i will provide more info if is needed. thx!
LE: found it. a damn semi-colon. THANK YOU ALL! didn't expect to get so many responses in such a short time.
now i got another problem
under the menu which changes when the resolution is min 750px i have a h1 header that is usually on center
h1 {
font-size: 2.4213em; /*3.3684em*/
line-height: 1.2656em;
margin-top: 0.4219em;
margin-bottom: 0;
color: rgb(172, 140, 71);
text-align: center;
}
the problem is it gets to to the right when the window is from 750px to 950px. I have these settings:
#media screen and (min-width: 750px){
.main-navigation {
min-height: 90px;
border-bottom: 1px solid rgb(36,36,36);
border-top: 1px solid rgb(36,36,36);
/*overflow: hidden; dubiosssss */
}
.main-navigation ul {
max-width: 950px;
margin: 0 auto;
}
.main-navigation li {
float:left;
margin-left: 20px;
width: 20%;
}
.main-navigation a {
background: none;
}
}
/* media query for 750*/
}
#media screen and (min-width: 950px){
.main-navigation ul {
position: relative;
right: -15px;
}
}
any advice would be great, thanks again!
min-width in a #media parameter means that any size from the size you specified and larger will get the styles that you set.
It sounds like you have some of your styles are put in the wrong place. It is usually better to start small and go large in your CSS. This means specify global styles (styles that won't change) first and then work your way up to large viewports.
You are probably overwriting some styles that you would like to keep.
Related
Got a simple question. How do I scale this header? Basically on laptop screen, everything looks good but when I make the browser window thinner to replicate
a mobile screen, the header and the drop down button doesn't seem to scale.
I know I need to use a #media tag but unsure how this actually works.
header{
position: absolute;
background-color: #19212C;
top: 0;
width: 100%;
font-size: medium;
padding:1em;
}
.dropbtn {
background-color: rgba(130, 198, 169, 0.9);
color: #fff;
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
padding-bottom: 1em;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0144AC;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
border: 1px solid black;
padding: 12px 16px;
text-decoration: none;
display: block;
width: 15em;
}
Your question may be simple, and it seems you already know the answer - you lack the implementation for it.
You're starting with the size of a laptop screen suggests that you are starting out "desktop-first". You can then set a media query for a smaller size screen:
#media screen(max-width: 1280px) {
css goes in here
}
This media query says that the CSS between those brackets will only apply for screen width up to 1280px. You will have to put your own variables in there. and then apply the widths and other necessary CSS to style it according to the screen widths you are accommodating.
Be aware that this is just one of many solutions.
Media queries are a very versatile method and it all depends on what your strategy would be. I won't go into all the other related details of this topic, I've tried to keep it to a minimum, but I do suggest you brush up on this topic as it can be a slippery slope.
I created and off canvas navigation which works great in desktop, but on mobile devices when the menu slides open there is white space added to the bottom of the page.
An example can be found here.
Thanks for your help! :)
you can eliminate that white space by simply adding margin: -40px; or something like that to the .fcFooter class.
.fcFooter {
font-family: 'ff-tisa-web-pro',serif;
font-style: italic;
letter-spacing: .1rem;
font-weight: bold;
color: #8a8b8c;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
/* margin-top: 40px; This line would be replaced by the following */
margin-top: -40px;
border: 1px #ededed;
border-style: solid none none none;
display: block;
}
You can add that css only to mobile devices by a media query like this:
#media only screen and (max-width: 600px) {
.fcFooter {
margin-top: -40px;
}
}
Please let me know if this was useful
The height and width of the canvas must be declared in the height and width attributes, if you want it work correctly
Wrong:
<canvas style="height: x; width: y;">
Correct:
<canvas height="x" width="y">
I'm having two issues with Bootstrap's navbar dropdown. First, the dropdown from the navbar is not working on each page. The look of the Navbar is shown below.
The Calendar is a Google calendar that is being embedded into the page. Whenever I click on the calendar link itself, the dropdown does not work. If I attempt to navigate to another page after clicking on the calendar page, the dropdown also does not work. However, if I navigate to another page and then reload the page, the dropdown works again. Any idea what may be causing this issue?
The second problem revolves around collapsing the navbar when the window size changes. The way I have it set, the entire navbar should collapse when the screensize is less than 1200 pixels, and clicking the collapsible should extend the navbar to a height of 85vh. While the navbar does collapse at 1200px, the collapsible does not extend to a height of 85vh until hitting the default of 767px. My code for this is shown below:
#media screen and (max-width: 1200px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
#nav-portallinks {
li a {
color: white;
}
li a:hover {
color: black;
}
.divider {
width: 25vw;
margin-left: 0;
}
font: {
family: $font-text;
size: 2vw;
}
max-height: 85vh;
overflow: auto;
background-color: $cardinal;
width: 25vw;
margin-left: 50vw;
}
}
Any ideas?
In regards to unresponsive dropdown you are probably having some conflict between the calendar and bootstrap's behavior, maybe isolating the issue in a fiddle or sharing some of the code would help to identify it.
For bootstrap 3.3.x here is the CSS you need to toggle collapse on 1200px:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
See working example
Another alternative would be to change the variable $grid-float-breakpoint: to $screen-lg-min !default; (which is 1200px) and recompile via SASS, default is 768px.
I have a navbar, which is pretty standard, and I want to make it a bit thinner.
So I tried this:
http://www.bootply.com/9VC5N55nJD
But the buttons remain too big. Click the drop down, and you'll see the issue. Is there a way to make the navbar thinner in one place? Or do you need to add css for the navbar and the buttons and what ever else may crop up?
Also, if I say it must be 30px in height - on a mobile, that might be too narrow, so do I need a media query for the different sizes?
Here is a working fork of your code.
Bootstrap by default uses a padding-top: 15px and padding-bottom: 15px for .navbar-nav > li > a. The following CSS will take care of this:
.navbar-nav > li > a {
padding-top:10px;
padding-bottom:10px;
}
After reducing the screen size (and for mobile devices as you've mentioned) running a media query that resets them and kind of makes the navbar a bit larger will do the trick. The following is a hacky way to do so:
#media (max-width: 768px) {
// enter css for mobile devices here
.topnav {
font-size: 14px;
}
.navbar {
min-height:50px;
max-height: 50px;
}
.navbar-nav > li > a {
padding-top:15px;
padding-bottom:15px;
}
}
Use the below css and let me know.
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand {
float: left;
height: 40px;
line-height: 20px;
padding: 10px 15px;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 0;
margin-right: 15px;
margin-top: 6px;
padding: 6px 5px;
position: relative;
}
You need to fix the CSS for the dropdown. Here's the CSS to add to your stylesheet:
ul.navbar-nav, ul.navbar-nav li {
max-height: 40px;
min-height: 40px;
}
Changing bootstraps formatting like the navbar has been difficult. They have so many styles that are set, that it's tough to find which one you need to change. Just add the above style to the css sheet and you should be gravy.
Edit
Also, why not use height: 40px if you're just going to set the min-height and max-height as the same value?
I have this div named "container" that is supposed to be displayed when the max-width gets to 47em. This can be triggered through zooming in. It's initial display is none but in the media query i change it to display block. The problem is that even after zooming in enough to get the max-width to become 47em, it's still not displaying anything. Why is this and how can i go about fixing the problem?
Code: http://codepen.io/anon/pen/RWBJXv
html,
body {
height: 100%;
margin: 0px;
font-family: verdana, arial, helvetica, sans-serif;
}
#media (max-width: 47em) {
#container {
display: block;
}
}
div#container {
display:none;
}
div#nav {
position: relative;
width: 100%;
background: white;
box-shadow: 1px 1px 15px #888888;
}
div#logo {
border-right-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.15);
font-family: 'Myriad Pro Regular';
font-weight: normal;
color: #1E3264;
font-size: 2em;
}
<body>
<div id="container">
<div id="nav">
<div id="logo">TEST</div>
</div>
</div>
Your code has several problems:
First of all, div#container is a css selector with a higher specificity than #container, which you are using inside your media query, so the general rule takes precedence.
Second, make sure you always put your media-queried rules after your general rules.
http://codepen.io/anon/pen/zvLLPa
Seems to be an order & specificity issue.
Try changing this
#media (max-width: 47em) {
#container {
display: block;
}
}
div#container {
display:none;
}
to this:
#container {
display:none;
}
#media (max-width: 47em) {
#container {
display: block;
}
}
Codepen Demo
If you swap around your media query with your general css, and add an important tag this sorts out your issue example:
#container {
display:none;
}
#media (max-width: 47em) {
#container {
display: block;
}
}
Check out this codepen: http://codepen.io/sshhdaniella/pen/EVppwR