http://www.ontargettdesign.com
Hi,
I am having problem with the navigation bar and the logo when the webpage is resized to ipad size:
[IMG]http://i60.tinypic.com/4r95qo.png[/IMG]
How can I code it to be a narrower height, I feel I have tried everything!
Any help would be very much appreciated.
Thanks in advance
Your Media Queries are clipping the image. This is because the div you have is smaller than the background image being used. If you remove the "width" & height" the logo will display properly. To view this. Make you browser smaller to see the clipping occur (Because of #media). Right click on the logo and "inspect element". On the right or bottom it will show you the css that is applied to this image. You can toggle the css to see how the code effects your image.
either add background-size:contain; to both of the follow or remove the width and height.
#media (max-width: 979px) and (min-width: 769px)
.navbar-brand {
height: 32px;
width: 132px;
}
&
#media (max-width: 768px)
.navbar-brand {
height: 32px;
width: 132px;
}
To change make the navbar height the same across all media widths you will still have to mess with the media widths. Your standard height is "height: 76px;".
The first CSS is for the smallest possible screen
#media (max-width: 768px)
.navbar {
height: 76px; /* add this */
}
This is the second smallest screen (for tablets). You will not to get rid of the clear:both that is sending the navigation to the second line
#media (max-width: 979px) and (min-width: 769px)
.navbar-collapse {
float: none;
clear: both; /* DELETE THIS */
height: 100px; /* You can change this to 76px if you want to be consistent */
}
Related
I am trying to make my mobile logo larger on our site. The logo is perfect for desktop, but on mobile it is very small, regardless of theme settings I tweak.
I tried this snippet in additional CSS without luck:
`
/* MOBILE LOGO HEADER */
#media only screen and (max-width: 990px) {#logo-container img {
width: 100%;
height: auto;
}
}
`
#media (min-width: 320px) and (max-width: 767px){
width: 100%;
}
You can add this following CSS code to change your logo size on mobile.
/* It means on screens that are 640px or less, set logo image width 50% and margin and padding auto means on center.*/
#media screen and (max-width: 640px){
.header-logo img {
width:50%!important;
margin:auto;
padding:auto;
}
}
i am learning CSS (but i know some stuff).
I am working on a demo webpage that i want to create with css to have a layout that i want.
Concept:
I have a container DIV which also has a top-div, left-div and content-div inside.
At first, with the help of media queries i make a layout for 3 different devices:
#media all and (min-width: 960px)
#media all and (min-width: 600px)
#media all and (min-width: 340px) and (max-width 599px)
So at the lowest #media i make the top bar position fixed to be always at the top, else it is not fixed its relative and it has some margin
The proble is i've got an icon a menu-bar icon that you see in mobile websites, i create an image tag within top-div and in css i have display: none;, width: 6%;, height: 10%; if it will work it will be awesome. But when inside the 3rd #media i type div#container div#top-div img#menu_bar_icon{ display: block; } it doesn't work!
I tried the opposite to have the default display at first (just removed the display: none from the img) and within the #media i type div#container div#top-div img#menu_bar_icon{ display: none; } and it WORKS....
I don't know why this is happening, please help me
Thank you!
I've set up a media query that should center an image when the screen is smaller than 600px. When bigger then 600px, the image correctly displays to the right of the site title. Chrome inspector assures me that the queries are working, but I think there might be an overarching rule that's keeping my margin: auto from applying. The 'globes' image in question is at the top of:
http://livinginbetween.org/temp/
I'd love any suggestions. Thanks in advance for your time.
Add display: block; to your media query to center the image.
#media only screen and (max-width: 599px) and (min-width: 0px) {
.globes {
display: block;
width: 159px;
margin: 0 auto 0 auto;
}
}
I was experimenting with media queries to see the effects.
So I tried using min-width(480px) query to change the width of a div from 100% to 520px when the window was maximised but the width of the div stays 100%.
The code:
#box {
margin: auto;
background: white;
width: 100%;
}
// Media Queries
#media only screen and (min-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So my question is, why does the width of the #box stay as 100% when the window is maximised?
What am I doing wrong?
jsFiddled here is your code with min-width:480px. It applies when the size of available space is bigger than 480px (the black box)
try max-width. This context will apply when available screen space is less then 480 pixels. jsFiddled here, black box will be applied when available space width is lesser than 480px
#media only screen and (max-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So, your #box is by default 100% width except when the available space is greater than 480px. your code is working OK.
Maybe it's the comment : // Media Queries witch caused an error ?
I think you have the media query wrong. As you have it now, it's changes the content over 480px. Where I think you want it under 480px.
So it should be:
#media only screen and (max-width: 480px) {
//code
}
Hence, (max-width: xxx) not, (min-width: xxx).
Example fiddle
I had commented the code using // syntax by accident which isn't supported in CSS, hence the code below that line of comment not working. It now works after I changed it /**/ syntax.
Is it possible in CSS to handle the position of a background image depending of the dimension of the browser page, or should I use javascript to handle that?
When the image is bigger than the page it should be aligned to the left
When the image is smaller than the page it should be aligned to the center
Media queries - they change CSS styles dependent on browser size.
#img {
width: 1000px;
margin: 0 auto;
}
#media
screen and (max-device-width: 1000px),
screen and (max-width: 1000px) {
#img {
float: left;
margin: 0;
}
}