So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
Here is my site:
http://www.gregorydanelian.comule.com/ken
I want thumbnail gallery to be centred at all times but I am having trouble doing this.
I know I can use
text-align: center;
On the parent element and then set the thumbnails like so:
display: inline-block;
However nothing is working, the thumbnails always float left.
I have tried adding media queries to force the margin from left (for example):
#media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;
}
}
But there must be an easier way to just get the ul to centre no matter what the width is.
How can I centre the thumbnail gallery on all browser widths?
Add these changes and remove those left-margins you set !important on ul
.thumbnails > li {
display: inline-block;
float: none;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnails {
margin: 0 auto;
text-align: center;
width: 100%;
}
Important: Add this to end of your css/mystyles.css file.
Add this CSS media query
#media (min-width: 1200px)
.thumbnails {
max-width:1200px
}
you may have to adjust media queries for multiple screens.
I am trying style a div so that its width decreases after a certain point wrt to the width of the viewport.
Here is my code:
<div data-category="budget" class="hotels-block active ">
<img src="images/budget1.jpg">
<div class="info-block">
<h2>BUDGET HOTEL 1</h2>
<p>fist line, second line, USA, third line comes over here</p>
<hr/>
BOOK NOW
</div>
</div>
CSS :
.hotels-block {
overflow: hidden;
margin-bottom: 30px;
}
.hotels-block img {
float:left;
}
.info-block {
width: 320px;
float: left;
display: inline-block;
background-color: #62bcb1;
text-align: center;
color: #FFF;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
width: 30%;
}
}
I want the width of the .info-block div to reduce until the viewport width hits 961px.
Currently, .info-block shrinks until 977px and then falls to the next line.
How do I prevent .info-block from going to the next line? No JS/JQuery please.
you want to use min-width and max-width properties? usually as absolutes and then set the standard width to a percentage. Also set the width in the media query to !important to supersede the pre-set arrangement.
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
min-width:200px;
width: 30% !important;
max-width:400px;
}
}
I'm writing a static website and testing it locally. I have written a media query to change the layout a little bit so that it is much nicer to look at on a smartphone. With the media query my aim is to change the text and the profile photo from being side by side to being one followed by the other.
My issue is that when I load the HTML file on Chrome or Firefox and resize the window, the layout does not change and I cannot figure out how to fix it. Any help would be much appreciated. Find my code below.
For my standard CSS I have this (a small snippet):
#about-text {
/*A div containing paragraphs and a table*/
display: inline-block;
width: 50%;
}
#profile-photo {
/*An img tag after the closing about-text div*/
border: 4px solid #1abc9c;
display: inline;
float: right;
margin: 8% 0% 0% 0%;
max-width: 40%;
}
And then I have a media query and the corresponding CSS:
#media (min-device-width : 320px) and (max-device-width : 480px) {
#about-text {
/*A div containing paragraphs and a table*/
display: block;
width: 50%;
}
#profile-photo {
/*An img tag after the closing about-text div*/
border: 4px solid #1abc9c;
display: block;
float: right;
margin: 8% 0% 0% 0%;
max-width: 40%;
}
}
You are using min-device-width and max-device-width which only takes into the account the device's screen size. Use min-width and max-width and it will work in your browser when you resize.
Example:
.testDiv {
color: green;
}
#media (min-width : 320px) and (max-width : 480px) {
.testDiv {
color: red;
}
}
http://jsfiddle.net/ZUPD2/
Maybe because there is no closing bracket for the media query block ?
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.