I'm doing a page with html and css . this page there is a header in the mobile version has a height of 80px and the PC version has a height of 150px and within the heading is a logo in the mobile version has a height of 70px and a width of 250px and version pc 85px 300px . The problem is that when I open the page in Firefox and inspect the header elements and logo has lower dimensions ace assigned , although the programmer tools appear validated the assigned dimensions.
*{
padding: 0;
margin: 0;
}
body{
min-width:300px;
margin: 0px;
padding: 0px;
}
.Wrapper {
max-width: 980px;
margin: 0px auto;
position: relative; background-color: #fff;
}
header{
background: rgba(51,20,10,0.95);
}
/* Mobile */
#media screen and (max-width: 979px) {
header{
display:block;
width:100%;
height:80px;
}
a.logo{
background-image:url(Logo_M.png);
width:250px;
height:70px;
position: absolute;
top:5px;
left:50%;
transform: translate(-50%, 0%);
}
}
/* PC */
#media screen and (min-width: 980px) {
header{
width:980px;
height:150px;
}
a.logo{
background-image:url(Logo_L.png);
width:300px;
height:85px;
position: absolute;
top:20px;
left:56px;
}
}
<div class="Wrapper">
<header>
<a class="logo" href="#"></a>
</header>
</div>
Hmm. A few things I would suggest :
stick to a naming convention when assigning class names, capitalized
class names aren't a popular choice
care about css specificity, it will come back and haunt you when
doing media queries as you will be in danger of overwriting styles
avoid using position absolute when doing responsive websites
you don't need "display:block" and "width:100%" at the same time,
display block already sets the width to 100%
avoid assigning both width and height to images, it can lead to image
stretching
I would tackle your problem this way :
.container {
max-width: 980px;
margin: 0 auto;
}
.main-header {
background:rgba(51,20,10,0.95);
height: 150px;
text-align: center;
padding-top: 5px;
}
#media(max-width:980px) {
.main-header {
height: 80px;
}
.main-header__logo {
height: 70px;
}
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<header class="main-header">
<a href="#">
<img class="main-header__logo" src="http://placehold.it/300x80" alt="logo" />
</a>
</header>
</div>
</body>
</html>
I hope this pushes you in the right direction.
I tested your code on Firefox 47.0 for Ubuntu. It seems ok,on mobile the logo is 250px/70px
Related
I'm trying to build a very basic site with an image centered in the middle of the page with three lines of text below it, also centered.
I have it how I want it to look on a larger screen, but when viewed on a smaller screen (iPhone) the image is too large. I need to have the image resize based on the screen resolution.
I've done some Google'ing and know this is possible, but have not been able to get it to work. HTML/CSS is not my strong suite. Any help would be much appreciated. Here is my code:
<html>
<style>
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white }
section {
background: white;
color: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<IMG src="Logo.png" alt="Logo">
<br><br>
<h1><center><p>Email
<p><font color=B5B5B5>Phone Number
<font size=7> <p><i>Tagline</i></center></font>
</section>
</html>
You can use media queries. Try to add the following code in your CSS.
CSS:
#media screen and (max-width: 480px) {
img {
width: 400px;
}
}
Once the browser is at 480px, it will make the img width 400px. You can change these numbers to suit your preference.
You need to look into setting up fluid images, this will help you get started...
CSS Fluid Image Technics
Here is an example...
HTML
<section class="container">
<img src="http://placehold.it/750x250">
<div class="copy">
Email
<p>
<span class="phone-number">Phone Number</span><br />
<span class="tagline">Tagline</span>
</p>
</div>
</section>
CSS
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white
}
.container {
bottom: 0;
left: 0;
height: 300px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.container img {
max-width: 100%;
}
https://jsfiddle.net/kennethcss/71a6mngh/
The image is centered (using absolute centering), and when you drag the browser in the image automatically adjust it's size...this is how fluid images behave (no need for media queries per se). If you still need a media query you can do something like this...
https://stackoverflow.com/a/39760016/4413798
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You need to add a max-width to the image:
img {
max-width: 100%;
}
just off topic: <h1><center><p>..</p></center></h1> is invalid. Just use <h1>..</h1> and style it.
<font> is also invalid and deprecated (just like center)
Try something as below, there were few error in your codes, you could style your HTML elements by adding style tag in your targeted HTML element or by adding external or internal CSS files. Well now to make it responsive use CSS media query as below, define breakpoints where you need your image to change.
#media screen and (max-width : 480px){
.......
.......
.......
}
#media screen and (max-width : 320px){
.......
.......
.......
}
body{
background:#fff;
}
#box{
width:70%;
height:300px;
margin:auto;
margin-top:20%;
}
#box > .bximg{
width:180px;
height:180px;
overflow:hidden;
margin:auto;
}
#box > .bximg > img{
width:100%;
min-height:100%;
}
#media screen and (max-width: 480px){
#box > .bximg{
width:120px;
height:120px;
}
}
<div id="box">
<div class="bximg">
<img src="https://source.unsplash.com/random">
</div>
<h1 style="text-align:center;margin:0px;">
Email</h1>
<p style="text-align:center;margin:10px 0px; "><font color=B5B5B5>Phone Number</font>
<p style="text-align:center;margin:10px 0px;"><i>Tagline</i></p>
</div>
You can use max-width for <img> element.
section img {
max-width: 100%;
}
You're going to want to take a look at media queries in the Mozilla docs.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There's a link to help you get a better understanding of it but basically the web content will resize based on the size of the screen.
I am trying to make a basic responsive structure for a website with CSS. So far I have managed to make three column divs, a menu, a sidebar and one for content.
What I would like to achieve now is to have the menu and the sidebar to be 100% of the viewport height and fixed so that the content div is "scrollable" but the menu and the sidebar stays on top no matter how much content there is in the col content column. Naturally, I do not want this to happen in the media query though.
How can I achieve this most efficiently with CSS. Do I have to restructure the divs in HTML or is there any way to achieve this with CSS?
/* SECTIONS */
.section {
clear: both;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
}
/* GRID OF THREE */
.menu {
width: 33%;
background-color: #98D2ED
}
.sidebar {
width: 33%;
background-color: #D3ADAD
}
.content {
width: 33%;
background-color: #C9E4D1
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.menu {
width: 100%;
}
.sidebar {
width: 100%;
}
.content {
width: 100%;
}
}
<div class="section">
<div class="col menu">
<p>
Menu
</p>
I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px.
</div>
<div class="col sidebar">
<p>
Sidebar
</p>
I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px.
</div>
<div class="col content">
Content
</div>
</div>
What I am trying to achieve:
You can use flexbox, either for known/unknown width and height elements, The key is to set the content area to overflow:auto, and switch the flex-direction to column in media queries.
jsFiddle
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.content {
flex: 1;
overflow: auto;
}
.menu { background: grey; }
.sidebar { background: silver; }
#media (max-width: 480px) {
body {
flex-direction: column;
}
}
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="content">
<!-- scroll test -->
<div style="height:1000px;">Content</div>
</div>
Or, the traditional way to set the menu and sidebar to position:fixed.
jsFiddle
html, body {
height: 100%;
margin: 0;
}
body {
margin-left: 200px;
}
.menu, .sidebar {
position: fixed;
top: 0;
height: 100%;
overflow: auto;
}
.menu {
left: 0;
width: 100px;
background: grey;
}
.sidebar {
left: 100px;
width: 100px;
background: silver;
}
.content {
overflow: auto;
}
#media (max-width: 480px) {
body {
margin: 100px 0 0;
overflow: hidden;
}
.menu, .sidebar {
left: 0;
width: 100%;
height: 50px;
}
.sidebar {
top: 50px;
}
.content {
height: calc(100% - 100px);
}
}
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="content">
<!-- scroll test -->
<div style="height:1000px;">Content</div>
</div>
As I understand, you want your .menu and .sidebar to be stuck to the screen in one place and have the content be scrollable. And add some more code to other things as well, I know that sounds vague, but it would be a waste of time to write everything down, as I have edited you I finished copy, and I have notes that explain all my changes (and the reasons for doing so) in the code below.
I removed the floats and their classes, as I believe those are not necessary, and that the floats do more harm than good. As well as moved the .content to be in the middle column (between .menu and .sidebar). However, if you need to, feel free to change any or al of these things back.
Here's the updated code: (and here's a JSFiddle: JSFiddle)
I know that .menu has a weird space above it (when running the snippet and the JSFiddle), but I have it live on my website here, and it behaves perfectly fine, and uses the same code.
* {
margin: 0px; /* Added to remove margin from everything */
padding: 0px; /* Added to remove margin from everything */
}
.section, .menu, .sidebar, .content {
display:inline-block !important; /* Added so they will line up next to each other */
}
.section {width:100%;} /* Pretty self explanatory, added to set ".section" to a width of 100% */
/* GRID OF THREE */
.menu {
width: 33%; /* Was already here */
background-color: #98D2ED; /* Was already here */
height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */
position: fixed; /* Makes it stay "fixed" to one place on the screen */
}
.sidebar {
width: 33%; /* Was already here */
background-color: #D3ADAD; /* Was already here */
position:absolute; top:0px; left: 67%; /* To make the element in the right place, add the width of "menu" and "content" */
height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */
position: fixed; /* Makes it stay "fixed" to one place on the screen */
}
.content {
width: 34%; /* Was already here, but changed it to 34 to make the website fill the page */
background-color: #C9E4D1; /* Was already here */
position:absolute; top:0px; left:33%; /* To make the element in the right place, make this the width of "menu" */
}
/* The CSS below this was already here */
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.menu { width: 100%; }
.sidebar { width: 100%; }
.content { width: 100%; }
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="section">
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
<div class="sidebar">
Sidebar
</div>
</div>
Really Hope that helped!
So I have some text which sits, next (right floated) to an image within the footer area of my document. When I re-size my browser to a min-width:768px.
I'm trying to get the text, and image to both be centrally aligned and with the image to be positioned above the text, but I can't seem to do it. All that happens is, the image shrinks to a dot and neither re-align.
Here is an example to what I'm trying to achieve, and my existing code:
HTML :
<div id="wrapper">
<footer id="page_footer">
<p>Thanks for visiting</p>
<a href="#" target="_blank"><img alt=
"nffc_logo" src="images/logo.png"></a>
</footer>
</div><!-- wrapper -->
CSS :
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0; /*sticky footer*/
left: 0;
background: #282828;
color: white;
}
#page_footer img {
max-width: 3%;
height:auto;
margin: 5px;
float:right;
}
#page_footer p {
float:right;
margin-right: 10px;
margin-left: 1px;
}
and then an empty media query :
#media screen and (min-width:768px) { }
I've added an additional container for a link and paragraph, .right-div and made it float: right; so you don't need to float it's children ( p and a ). They only need to be displayed as inline blocks, and have width or max-width for better positioning.
Please notice that i've applied styles to a, not to img
So here is the DEMO
changing the order of your markup to (showing image first and <p> after it), solves the problem in simplest form:
<div id="wrapper">
<footer id="page_footer">
<a href="#" target="_blank">
<img alt="nffc_logo" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
</a>
<p>Thanks for visiting</p>
</footer>
</div>
<!-- wrapper -->
...here is a solution demo
CSS
#media screen and (max-width:768px) {
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0;
/*sticky footer*/
left: 0;
background: #282828;
color: white;
text-align:center;
}
#page_footer img {
max-width: 3%;
}
#page_footer p {
margin:0 auto;
}
}
#media screen and (min-width:768px) {
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0;
/*sticky footer*/
left: 0;
background: #282828;
color: white;
text-align:center;
}
#page_footer img {
max-width: 3%;
vertical-align:middle
}
#page_footer p {
display:inline-block;
}
}
what and how ?? to align <p> next to image use display:inline-block; method for alignment.
to align one above the other, simple margin would do.
I'm having some trouble with a responsive design. The first that I have tried to create.
For some reason when I view the site on my iphone everything is zoomed in.
What I want is; On the desktop site, the logo will sit left in the '.container' and when viewed on an iPhone the image will sit directly in the middle.
Here is the URL: http://markpetherbridge.co.uk/peak.
I have added this into the html header:
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
this is the relevant CSS:
<div class="wrapper">
<div class="container" id="header">
<div id="peak-logo">
<img src="img/peak-logo.png" alt="Peak Architects" />
</div>
</div>
</div><!-- end.Header !-->
My desktop CSS is:
/* structure */
body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #8d8c8c;
}
.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
and the CSS for the phone is:
#media screen and (max-width: 480px) {
body {
}
.wrapper {
max-width: 480px;
}
.container {
width: 100%;
max-width: 480px;
}
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 200px;
min-width: 480px;
margin: 20px 0;
}
}
It seems to work in the browser just not when viewed on an actual phone device.
This will work when #media screen takes effect.
http://jsfiddle.net/Enxu2/1/
You have a few issues because of your minimum width being set to specific pixels. For a mobile atmosphere you need to use a % so it can adapt to the viewport. Once you set something to width: 100% you need to be conscious of your left/right margins and padding as it can move elements outside of where they should be and allow the user to zoom in and out on your page instead of it fitting perfectly. An easy way to fix this if you are having some elements outside of your defined borders you can try changing some width:100% to width: 95% or even 90%. This should allow you to see which elements are causing the problem.
In the jsfiddle provided I changed some widths and some margins. I hope this will help you get on the right track!
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%;
}
.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}
You also need to make sure your image will be responsive, so you need to set it to a % width also. if you have a max width/height for the image you can always define it in the css using max-width: or max-height: but keep in mind your viewports.
I hope this helps!
I am designing a webpage that does not adjust itself as per the screen resolution. It looks OK on higher resolutions but on 1024x768, only the left side of the page is visible. I have tried out putting the whole thing in a container and aligning it to the center but it doesnt work. What would be a way out?
Here's a bit of the HTML:
<div id="layer-container" style="position:absolute; background- image:url(images/bkgrd_final.jpg);">
<div id="info-layer" style="position: absolute; text-align: left; left: 0px; top: 2px; height: 747px; z-index: 48; display: block; margin:0 0 0 -285px;" title="">
And here is some CSS:
div#container {
position:absolute;
margin:0 auto;
text-align:left;
overflow:visible;
}
body {
font-size: 8px;
line-height: 1.1875;
text-align: center;
margin: 0;
background-color: #0C0C0C;
background-repeat: repeat-x;
background-position: center top;
color: #000000;
overflow-x:hidden;
}
I would sugest you add mediaqueries with styles for smaller devices.
#media only screen and (max-width: 768px) {
even better: go "mobile first" by designing you page for mobile devices. then add media-queries with extra styles for bigger devices.