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.
Related
Please see:
https://codepen.io/alanvkarlik/pen/vdWyrd
I'm lost atm. My website has images that show up when you hover over the bold text links.
Right now they are showing up with original size, sometimes stretching beyond the screen.
I'd like them all to have the same width - say 80% of the screen width. Where and how do I edit that?
The main block with those links is centered with following divs:
<div id="wrapper">
<div class="table-container">
<div id="content">
and their css:
#wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.table-container {
height:100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55%;
display:table;
text-align: center;
}
#content {
vertical-align:middle;
height:100%;
display:table-cell;
max-width:100%;
margin: 0 auto;
font-size: 3vw;
line-height: 4vw;
font-family: 'Vesper Libre', serif;
text-align: justify;
color: #fff;
}
Basically I used this set up to make sure the block of links is always in the centre of the screen (both width and height wise).
Any help will be appreciated !
You're already using the vw unit, so just use that for your image:
.hover_link img {
width: 80vw;
height: auto;
}
I also suggest you remove display: none; from .hover_img span as this will nullify your opacity transition (you can add pointer-events: none; to cancel any mouse event on the span and its contents).
I am creating a website and I want to have a link or a button in the middle of this image
PC Image
the link/button needs to be in the center of the PC screen and say "Start Learning" when the link/button is clicked it will link to another page. I have tried creating this on my own and am trying to make the website responsive but when I am at 100% browser width the link is perfectly centered and when i minimize the browser the PC Image stays at 100% width which is good and responsive but the "Start Learning" link wont stay centered on the image and minimize with it, the link just jumps around the page.
use vw(% of the viewport width) for your font size it will scale the size of your font and I set some css for your code that makes your button responsive and centered even if you resize your browser width.
.banner-inner
{
width:100%;
height:100%;
position:relative;
text-align: center;
}
.centered
{
position: absolute;
margin: 0 auto;
width:100%;
height:auto;
display: block;
text-align:center;
font-size:6vw;
left:0;
right:0;
top: 50%;
transform: translateY(-50%);
}
.centered a
{
margin: 0 auto;
color: #000;
text-decoration: none;
padding: 20px;
}
.img
{
width:100%;
height:auto;
display: block;
margin: 0 auto;
object-fit: cover;
}
<div class="banner-inner">
<img class="img" alt="" src="https://img00.deviantart.net/080b/i/2014/360/d/3/texture_13_by_sirius_sdz-d19qqe1.jpg">
<div class="centered">Start Learning</div>
</div>
I had to make a few changes to your style to make it responsive.
Your Centered class has a margin left and right set to auto to center it horizontally. We made margin top a % so it will decrease as the image does.
We also used display flex to center everything. and set a font which will decrease via media queries. I also added a width of 100% to the image and an auto height.
The CSS
#media only screen and (max-width:1000px){.centered{font-size:12pt!important;}}
#media only screen and (max-width:800px){.centered{font-size:11pt!important;}}
#media only screen and (max-width:600px){.centered{font-size:10pt!important;}}
#media only screen and (max-width:400px){.centered{font-size:9pt!important;}}
#media only screen and (max-width:200px){.centered{font-size:8pt!important;}}
.banner-inner{
width:100%;
height:100%;
position:absolute;
text-align: center;
color: white;
}
.centered{
position: absolute;
margin-left: auto;
margin-right: auto;
width:100%;
height:auto;
margin-top:20%;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-size:12pt;
}
.img{
width:100%;
height:auto;
float:left;
}
The HTML
<div class="banner-inner">
<img class="img" alt="" src="img/Website PC.png">
<div class="centered">Start Learning</div>
</div>
I'm really having a lot of trouble trying to recreate this Wix site with the goal of having the mobile & desktop website responsive with other content.
http://nl.wix.com/website-template/view/html/936?&viewMode=mobile
As soon as I use a different width the 30° moves to a different position,
which means the site isn't properly responsive. I have no idea how to fix this.
Here's my code:
HTML:
<body>
<div class="header">
<h1>30 °C</h1>
<div class="clearfix"><img src="./img/banner.png" alt="banner"> </div>
<p>Beginning application developer</p>
</div>
</body>
CSS:
.header {
background-color: #7A7CB1;
width:100%;
position:absolute;
top:0;
left:0;
}
.header img {
width: 62.5%;
margin-top: 2.5%;
margin-left: 6.75%;
float:left;
}
.header h1 {
position: absolute;
top: 30%;
left: 30%;
font-size: 200%;
}
.clearfix {
overflow: auto;
}
.header p {
margin-left: 6.75%;
font-family: Verdana, geneva, sans-serif;
font-size: 13px;
}
I want the 30° to be below the logo like it is in the photo, but the logo and the text should become smaller or bigger (responsive) if the width of the phone is smaller or bigger.
If you want the text to become larger/smaller on different device widths, you need to add Media Screens
Here is an example of a media Screen
#media only screen and (max-width:940px){ /* Tablets*/
h1{
font-size:12px;
}
}
What this does is when the max width of the device is 940px(Average tablet size). The h1's font size is set to a different size.
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
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!