This is my site.. http://debt-trust.co.uk/home my problem is that my media screen css not working at the max width 545px... bu it will effect if the max width of browser is in #490px is there any who can help with my problem. thanks
#media only screen and (max-width: 545px){
.main-navigation {
margin-top: 0px;
background: #b5e61d;
padding-bottom: 4px;
padding-top: 3px;
}
#rightlogo{
width: 50%;
}
}
I got the solution of this problem there is an issue sometimes in the hosting sites that there is an error during for the updating there hosting site
Related
Here is the site-to-be (work in progress still)
http://www.fairhavenstorage.com/DRAFT
On a desktop screen it's fine, but on a mobile device, the site title and description do not budge. I added some custom CSS to allow the logo to display beside the site title - here is what I entered:
#logo .site-title, #logo .site-description {
display: block !important;
}
.site-title {margin-top: 26px;}
#logo img {
float: left;
margin-right: 20px;
}
#logo {
float: left;
width: 800px;
}
And for the image on the right side of header, I entered this:
.header-widget {
float: right;
width: 200px;
margin-top: 10px;
}
It's not looking good on my iPhone and I'm unsure what to do. If anyone can suggest a fix, that would be greatly appreciated!
try and deactvate or override existing css . There are #media queries in your existing css
I'm trying to change my website's body padding depending on the screen size, but the medium range does not work. The website still uses the body padding of the default mobile size. I have tried lowering the min-width from 768px to 767px or lower to see if that will change anything but it didn't. I cannot see what is wrong with the syntax. Have I missed something? Thank you.
body{
padding-bottom: 300px;
margin-bottom: 900px;
}
#media (min-width:768px) and (max-width: 991){
body{
padding-bottom: 300px;
margin-bottom: 500px;
}
}
#media (min-width:992px) {
body{
padding-bottom: 300px;
margin-bottom: 100px;
}
}
#media (min-width:768px){
/*more codes here....... */
}
Should be max-width: 991px
Also, your last query with "more codes..." can override your previous settings. What are they? if you set those properties here, you literally saying "Ok, apply these when the screen is larger than 768px". This is within your previous range and will be overridden.
I have looked all over for a solution to this problem and nothing seems to work and I really don't want to use a hack if I can avoid it.
When I set the line-height to vertically center my nav it's centered everywhere but safari, it's sitting about 2px high. Here is the css for the nav bar:
nav {
padding: 0px;
margin: 0;
font-size: 16px;
height: 25px;
}
nav ul {
padding-left: 0px;
margin: 0;
line-height: 1.5em;
}
nav li{
display: inline;
text-transform: uppercase;
padding-right: 12px;
padding-left: 12px;
}
I've tried line-height in px, em, and % and it's still wrong in safari. Here is a screenshot of the correct nav position in firefox and the wrong position in safari.
Any help on this issue is much appreciated.
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source: http://meyerweb.com/eric/tools/css/reset/
I am having trouble getting a media query to work in bootstrap ( using rails). Below is the media query
#media (min-width: 768px) {
.center.navbar .nav, .center.navbar .nav > li {
display:inline-block;
float:none;
vertical-align:top;
width:100%;
}
.center .dropdown-menu {
display: none;
text-align:left;
}
.center .dropdown.open ul {
display: block;
}
The above media query is overriding all default behaviour no matter what the screen size is.I have received some advice from #baptme (thanks so much) to explain what is happening (which I now understand), basically because the query is using two classes and the default behaviour uses 1 class then the media query overrides. So my question is how do I get the media query to work only when the screen size is below 768px in this example and override the default styles when not
However this is where I get a little confused as when inspecting the elements in Firebug the defaults are as follows
.center.navbar .nav, .center.navbar .nav > li {
display: inline-block;
float: none;
vertical-align: top;
}
.center .dropdown-menu {
text-align: left;
}
Can anyone shed any more light on this, any help appreciated, if you would like to see it in action go to
http://46.32.253.11/
From your example:
This will hide the dropdown, remove the black hover and display the links one under the other aligned on the left:
#media (max-width: 979px) {
.navbar .dropdown-menu {display:none}
.navbar .nav > li a:hover { background-color:transparent}
.center.navbar .nav, .center.navbar .nav > li {display: table;clear:both};
}
I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.