When trying to resize my webpage horizontally everything works out fine. When I try to resize the page vertically the divs start overlapping and the whole webpage looks weird. What could I try to fix this?
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
}
.container-2-wrapper
{
width:100vw;
height:100vh;
background: #f9f9eb;
}
<div class="container-1-wrapper"></div>
<div class="container-2-wrapper"></div>
I would recommend adding this to your styling on that section:
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
position: relative;
display: block;
clear: both;
}
This will put your code in a block format that's relative to the content surrounding it as well as clearing any text/elements on both sides of the page. I highly recommend this if you can (or are able to) float your elements to one side. If you code a float into your elements, this will keep your divs from running into each other. It should clear out both sides of the div element.
Also, if you're attempting to resize your page to format to another device, maybe this code snippet will help you out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Put this at the beginning of your CSS right under the declaration of font type and such (in the section for metadata). This should make your page so that it always scales up and down with the size of your window.
With the little information you can only guess:
Try to apply a position: relative and display: block to the wrapper
Related
I have banner that needs to have an image aligned to the left and full height from top to bottom. To the right of the Image is an H1 with a Tab-selection Div, and below that is Text/Content Div. The Image is set to the height and width I want through WordPress.
Here's an image of what i'm going for:
I can somewhat get what I want by floating left on the image to get the Div Text to go to the right.
But my biggest problem is that I can't get my image to align top left of the banner properly. I had to use -142px margin left and -281px margin-top just to get it to look like it was, but on bigger screens I want that image to always stay left and consistent. It doesn't stay left on bigger screen sizes.
Here's what it looks like:
Here's the code for the Image Div:
(image dimensions set on WordPress as 641 width x 716 height)
margin-left: -142px;
margin-top: -281px;
float:left;
max-width:103%;
left:0;
display:inline-block;
top:0;
position:relative;
The damn image just stays at the bottom. I made sure that the H1 element wasn't displayed as Block in case it was blocking the Image from moving up.
There is a wrapper around the Div Image and Div Text that I used this code:
display: inline-block;
position:relative;
width: 100%;
When I look through Chrome inspector, the width of the Image and Text wrapper doesn't go across the Banner section all the way either. Is this wrapper just my problem? Or is it how I'm targeting the image?
Also just to clarify: I'm trying to code this banner on WordPress so there is pretty limited HTML changes that I can make.
Thanks!! I've been looking everywhere on SO and Google and can't seem to find what I'm looking for. Maybe my problem is too specific? I'd really appreciate the help. I'd also be happy to give more examples / post more code if it helps.
give css to <img>
img{
height:100%;
max-height:100%;
width:auto;
}
may be this should work or if not then just post your html css i can help more from that
Here is a short example of what I did that may help you out some. There's no need to use the float property for this. Just specify the width property to whatever size you want it to be based on screen size.
* {
margin: 0;
}
header {
background: url(https://placeimg.com/1000/500/any);
width: 100%;
height: 500px;
background-size: cover;
}
header .header_img_left {
background: url(https://placeimg.com/640/480/any);
width: 35%;
height: 100%;
background-size: cover;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<div class="header_img_left">
</div>
</header>
</body>
</html>
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I want to disable my web page from scrolling horizontally but allow it to continue scrolling vertically. The web page itself simply lists png images. No code i found online has successfully enabled me to disable horizontal scrolling. The images I'm using make the browser allocate extra space to scroll for some reason. I'd appreciate any new ideas for a fix.
<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
}
</style>
Which disables scrolling all together.
What you want is actually default behaviour. By default, a browser will make your page scroll only vertically. Unless it contains content that is wider then the viewport. And that is probably your problem.
First of all I would strongly advise you never to use absolute positioning (unless you really have to). It messes with the flow of your page, and it is a pain to maintain or make responsive. (Those inline style attributes are rarely a good idea as well, but that's a different story)
So if you get rid of your absolute, all you have to do is make sure your images are never wider then their parent. That can easily be achieved with a single line of css:
max-width: 100%;
Et voila, that should do the trick. Have a look at the example I set up for you: http://jsfiddle.net/icebear/mywkmj7n/2/
If you need to position your images differently you can do so by adding margin/padding, or even work with floats or relative positioning, like the .center example I put in the fiddle.
<style type="text/css">
body {
min-width: 96px;
max-height: 200%;
overflow-x: hidden;
background-color: #FF0; /**/
}
</style>
try this put some content in it
I've gone through stackoverflow questions and a whole bunch of articles on vertically centering text like the following:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
None of the techniques seem to work with the latest version of Chrome. Is that just the nature of Chrome? My text just always appears at the top. It seems that whenever I use 50% or 100% as values for CSS's height or top, nothing happens.
I just need a single line of text vertically centered. line-height isn't helpful because I want it centered in the middle of the browser window... I don't know how tall the browser window is going to be.
UPDATE: The problem is apparently Foundation 4. Once I delete the following everything works as expected:
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
Any idea on how to make it work with Foundation 4?
I use various vertical centering methods regularly, and they still work in the latest version of chrome (31). You've probably overlooked some small detail - can you post what you've tried?
For example:
This technique uses a display:table-cell wrapper with vertical-align: middle; display: table-cell; element: http://jsbin.com/ofapiv/1/edit
And this technique uses a ghost element (a :before element with height:100% and both it and its sibling have vertical-align:middle): http://jsbin.com/uqutol/4/edit
And this is the ghost element technique simplified to center just a single line of text: http://jsbin.com/ubUxOgO/1/edit
<!DOCTYPE html>
<title>Centered line</title>
<style>
html { height:100%; }
.singleline {
position: absolute;
top:0; left:0; right:0;bottom:0;
text-align:center;
}
.singleline:before {
height:100%;
vertical-align:middle;
position:relative;
content:'';
display:inline-block;
}
</style>
<div class="singleline">This is a centered line!</div>
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen