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!
Related
I'm using bootstrap carousel on my site. When opened in a phone the images are huge. Take a look at www.nwberryfoundation.org to see what I mean. Is there a way to reduce the carousel in that view?
I've tried
#media screen and (max-width: 400px) {
.carousel {
width: 75%;
}
}
Doesn't seem to make a difference.
Just use below code no need for media query and dont apply width instead try max-width
.carousel{
max-width: 300px; // u can changed it based on ur need or play with %
margin: 0 auto; // required to center div horizontally
}
How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}
When I use default theme, I want to change container width to 100% on global.css in line around line 990:
Before:
#media (min-width: 1200px) {
.container {
max-width: 117022px; }
after:
#media (min-width: 1200px) {
.container {
max-width: 100%; }
Then the partis missing. How to fix it ? Thanks
Don't change styles for classes that are used on so many elements. If you want to have full width container use bootstraps container-fluid class instead of container for the element you want to be full width
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;
}
}
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 */
}