I'm working on the media queries for a site and I'm stuck on a static logo image which sits within the header but only when the screen size is min-width 960px.
Above that size I have an interactive particle logo image but when the screen is reduced down to mobile-size I just want a logo in the header. The problem is the logo simply isn't showing. I suspect it is being hidden by the nav bar which is fixed in position.
This is how I have my code at the moment -
<header>
<div id="logo"> <img src="images/havoc_logo.png"> </div>
<nav>
Home
What we do
Who we are
Who we work with
Say hello
Blog
</nav>
</header>
styles.css/media queries
#logo {
width: auto;
height: auto;
}
#logo img {
width: 200px;
height: 100px;
}
/* RWD for logo (particle-slider is id for interactive logo) */
#media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
#media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
#media screen and (max-width: 480px) {
body {
max-width: 500px;
}
header {
height: auto;
}
nav {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
border-bottom: 0;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
}
So, when I shrink the page right down to 480px or less then nothing shows in the header other than the nav bar. How do I show the logo image in the header when I shrink the page?
I found the answer with this Q&A here
Basically my nav was held in a fixed position and covering the logo so I had to revert the position:fixed rule to position:static
Related
I have a footer container. There are some menu items and two paddels(left and right) to scroll left and right the menu. There are one description text and one log link.
Now, if the screen size is more than 768px then all these three divs( menu, description text, log link) are in same line. Which is fine. But, if i choose screen size less than <768px then as per my application design will be like this below.
< Menu >
Description text Log link
Here is the screenshot for less than <768 px.
Now, description text and log link aren't in same line . Because of repair log width, menu inner wrapper is hided behind the screen. How to solve this?
Here is my css style for less than (768 px screen)
#media only screen and (min-width: 414px) and (max-width: 767px) {
.footerContainer {
height: 72px;
flex-direction: column;
.menu_item_outer_wrapper {
width: 390px !important;
height: 100%;
.paddles {
display: block;
.left-paddle {
transform: translate(-1%, -45%);
}
.right-paddle {
right:0;
transform: translate(10%, -45%);
}
}
.menu_item_inner_wrapper {
margin-left: 36px;
}
}
.footer-desc_log-section {
width: 100%;
.footer__description {
width: 60%;
margin-left: 8px;
}
.footer__description,
.footer__audit-log {
line-height: 32px;
}
}
.footer-desc_log-section {
width: 100% !important;
height: 100%;
}
}
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
div{
display:inline;
}
}
.div2{
float:right;
}
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<body/>
You can check out this code just add display:inline; in the CSS of the div.
I have some images on my webpage. I originally put their sizes in pixels, e.g.:
<IMG src="image.png" width=700px height=100px>
When I used different machines with different screen resolutions, sometimes the page didn't look like I wanted it to.
I then switched to set the dimensions using percentages rather than pixels, e.g.:
<div class="logo_container">
<IMG src="image.png">
</div>
and
.logo_container img {
padding: 15px;
width: 37%;
position: relative;
}
The page now looks how I want it, but if I start to resize my browser window, the images shrink (whilst maintaining aspect ratio). I don't want this to happen.
I want the web page to look correct when the browser is full screen, but then I don't want images to shrink.
Thank you.
You should change the css based on the screen width:
<div class="logo_container">
<IMG src="image.png">
</div>
<style>
#media screen and (max-width: 540px) {
.logo_container img {
padding: 15px;
width: 100%;
position: relative;
}
}
#media screen and (min-width: 540px) and (max-width: 780px) {
.logo_container img {
padding: 15px;
width: 50%;
position: relative;
}
}
#media screen and (min-width: 780px) {
.logo_container img {
padding: 15px;
width: 30%;
position: relative;
}
}
</style>
Use em.
<img src="" alt="">
CSS:
.logo_container img {
width: 1em;
}
em is constant between all devices - it is always the same size in real life: see https://www.w3schools.com/cssref/css_units.asp for more info.
Just set the width of the image to a fixed amount of pixels:
.logo_container img {
width: 200px;
}
I have a navigation bar which has padding to allow content to display under the navigation bar. For mobiles I want to lessen the padding but the media query doesn't seem to work. Any ideas to why?
Example:
body{
padding-top: 70px;
}
p.t{
color: white;
background-color: black;
top: 0px;
position: absolute;
}
#media only screen and (max-width: 767px) {
.body {
padding-top: 0px;
}
}
<body>
<p class="t">
This is my pretend navbar woo.
</p>
<p>
hello
</p>
</body>
You're doing .body instead of body. By using .body, the CSS is searching for an element with class="body", instead of an element <body>. Simple fix:
#media only screen and (max-width: 767px) {
body {
padding-top: 0;
}
}
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.
I want to place <aside> sidebar column underneath the <article> main column(rather than next to it) to suit smaller screens (mobile devices).
How to achieve it in my two-columned website Home Page?
On desktop screen, current side by side display is fine. Only on smaller screen aside block is not coming underneath article block.
#main {
width: 58%;
margin-left: 2%;
float: left;
}
#sidebar {
width: 34%;
margin-left: 4%;`
float: left;
}
Remove the ' in #sidebar
Demo
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
#media (max-width:767px){
#main, #sidebar {
width: 100%;
margin: 0 0 20px;
}
}
Try to use #media and width: 100%;:
Here's the JsFiddle link demo.
E.g. small screen size: 767px
#media (max-width: 767px) {
#sidebar,
#main {
width: 100%;
margin-left: 0;
}
}
Hope it helps.