i'm trying to get my onepager to work. But sadly i have bug with my css.
If i try to scale the width of my browser below the width of my content a scrollbar appears. When i use the scrollbar and scroll to the right, i see my background color does not resize to the actually width. I don't want my website to be responsive or don't want to use any mediaqueries. Just basic stuff with a bug ;)
I took a screenshot to show what i mean:
Here is my website: Website
Just to make sure everyone understand HOW i mean the scrollingpart:
Remove your fix width properties e.g
style.css: 144
#header {
height: 95px;
/* width: 1200px; */ //Use percentages and media query to control width
margin: auto;
}
.section-wrapper {
width: 1200px; //Here use media queries and better to use % instead of px
padding: 50px;
margin: auto;
}
section#one>.section-wrapper:after {
content: url(img/leaf.png);
/* height: 152px; */
/* width: 331px; */
display: block;
/* position: absolute; */
margin: -57px 0 0 700px; // Do not use margin 700px instead position it on right and add right padding or distance.
}
after setting width to 100% in .section-wrapper the text stop clipping
Edit #2:
By removing the padding: 50px; from .section-wrapper in #one section and leaf part i got this result
Related
I'm designing a simple website in HTML and CSS but got stuck. I'd like my website to have an image at the top. Any content that comes after that image should appear underneath the image, not on top of it (like it does with a background image). The image should be 0.6 (or some other fraction) the height of the viewport and centered. Any overflowing part should be cropped. However, in case the image is too narrow, it should be resized to fill the whole width of the viewport. It should never change its apect ratio. I'd also like to keep my site script-free and would like to have no absolute values (like px) in my source files.
Here are some doodles I made to explain my idea:
Image height is set to 0.6vh. It is centered. The overflowing areas are cropped. Text starts at the bottom.
Image height would be set to 0.6vh but it wouldn't cover the whole viewport's width. Instead, set the image width to match the viewport width (equal to the width of the page), ignoring the 0.6vh rule. Text still starts at the bottom.
I've been searching the internet for two days already but I couldn't really find quite what I need.
Additionaly, I am trying to solve this problem: currently, I am using vh to set the height of the image, but it gets weird when viewing on a mobile browser, because the value of vh changes when the address bar collapses.
[EDIT]
Rule:
The minimum width of the image should be the width of the viewport.
Then, if it's possible, it's height should match 0.6vh.
[EDIT 2]
I noticed that the answers work great by centering an image and keeping it's aspect ratio. But the image shouldn't be cropped vertically.
Another doodle:
I hope this doodle makes it easier to see what I am trying to achieve. Red line indicates the "0.6vh rule" while blue line represents the "mininimal width equals viewport width" rule. Green rectangle shows where the image should be.
[EDIT 4]
I added an image and some comments to the previous image:
Rather than using an image tag, try setting its properties in CSS. It's easier to maintain aspect ratio and centering this way. You may also want to specify a minimum and maximum height property to ensure things look nice.
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box;
display: block;
width: 100%;
height: 60vh; /* 60vh = 60% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background-image: url('http://www.naturheilpraxis-kaelin.ch/bilder/fruehling-01.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /* Cover all available space. */
/* If you want the whole image visible try 'contain'*/
}
.main{
padding: 0 1em; /* L/R padding to look nice */
}
<body>
<div class="bg"></div>
<article class="main">
<h1>Your rad site</h1>
<p>Notice how the image is centered and it keeps its aspect ratio.</p>
</article>
</body>
[EDIT]
Okay! So here's the best I can do.
This doesn't crop anything vertically and there's no JS or hard values
BUT you do have to use an aspect ratio media query that you need to figure out based on your image.
This is the formula for the aspect ratio media query
Where H = image height, W = image width and D = percent of the viewport used (expressed as a decimal).
H / (W / (D))
For example, the image I used is 1000px x 300px. We're using 60% of the viewport so D = .6.
So 1000 / (300 / (.6)) >> 1000 / 500 >> 2/1 ratio.
body,html,.container{
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
height: 60vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
/* Hack*/
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
min-height: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio:
2/1) {
/* Aspect ratio determined like so -- H / (W * (10/6)) */
.container img{
position: relative; /*Undoing the hack basically*/
right: auto;
top: auto;
left: auto;
bottom: auto;
width: 100%; /*rather than the width get cropped, it's full. height is auto*/
}
.container {height: auto; /* the image height determines the height */}
}
<div class="container">
<img src="http://placehold.it/1000x300" alt="" />
</div>
Make it full page and resize the browser to see how the image adapts.
I really hope that helps!
How about an approach like this:
body,html {margin: 0;padding: 0}
* {box-sizing: border-box}
/*For the demo I've made the height below 30vh, you can change that to 6vh*/
/*Use background-size contain, if your image's height is larger that width*/
.Image-Banner {width: 100%;height: 30vh;background: url('https://i.stack.imgur.com/sj9LO.png') no-repeat 50%;background-size: cover}
.Main-Content {padding: 1em}
<body>
<header class='Image-Banner'></header>
<main class='Main-Content'>
<div>Foo Bar</div>
<hr>
<aside>Lorem Ipsum...</aside>
</main>
</body>
Note: Click Run Code Snippet to see the result.
This should do exactly what you are asking for, I believe.
Created an example based on your information:
[Example][1]
[1]: https://jsfiddle.net/2Lke94qn/1/
Let say that we have two divs:
<div class="top">Top</div>
<div class="bottom">Bottom</div>
Try this style:
html, body{
height: 100%;
}
.top{
width: 100%;
height: 60%;
background-image: url("http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg");
background-position: center;
}
.bottom{
background-color: grey;
height: 40%;
}
As you can see on this link ( http://riksblog.com/Marnik/index.html ), for some reason the width of the body and website is as it should, but there's a strange, empty space next to my website which makes it wider than it should.
I'm using bootstrap so I'm not really able to use these tricks like media-queries in css for the desktop version.
your looking for the overflow css property try this:
body {
overflow-x: hidden;
}
to completely remove the problem get rid of the right padding on this class:
section.first .section-content {
padding: 150px 15px //remove left/right padding
}
The problem is this css:
section.first .section-content {
position: relative;
width: 100%;
padding: 150px 15px;
text-align: center;
}
which causes the .section-content div to be as wide as its parent plus 30px.
Possible solutions are to add a box-sizing property to the style
box-sizing: border-box;
or change the width so that it doesn't exceed its parent
width: calc(100% - 30px);
In my app targeting mobile devices (with cordova but that shouldn't matter)
I want to show a scrolling div that fills the page except for a top and bottom navbar:
jsfiddle example
As far as I understand, I need to specify the height of the div in order for the div to scroll. (line 30 in the css - currently commented out):
#long {
background: -webkit-linear-gradient(red, blue);
width: 90%;
/* scroll */
overflow-y: scroll;
/* for the navbar */
margin-top: 48px;
float: left;
/* to make the scroll work */
/*height: 347px;*/
-webkit-overflow-scrolling: touch;
}
I would really prefer if I would have to because using discrete intervals for media queries will always risk some obscurely sized phones to have broader bottom margins than intended.
An additional requirements that might constrain potential solutions:
- The app has several "pages" which are div's that are moved out of the viewport to the left or right when not needed but not removed from the document.
Any ideas how to solve this? Preferably using only CSS.
If the page fit the viewport dimensions, I’d create a wrapper with some padding to position the navbar absolutely and then make an inner container scroll. This will always fit the viewport height and so doesn’t require a fixed height.
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
padding-top: 48px; // Allow space for navbar
}
.inner {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.navbar {
height: 48px;
position: absolute;
top: 0;
right: 0;
left: 0;
}
The HTML would look like:
<div class="wrapper">
<div class="navbar"></div>
<div class="inner"></div>
</div>
Demo
I'm working on a responsive wordpress theme but I have little problem. My page includes several boxes that are displayed side by side. Each box has a responsive height and width and contains an image and text(text is overlaid on the image).
Is there a way to set all boxes to the same height considering the correct aspect ratio(image)? Also if some boxes don't contain an image?
Live-Preview: http://apu.sh/3ne
JsFiddle http://jsfiddle.net/tjwHk/
My suggestion for your case is to fix all the boxes width & height to a value of your preference.
then, give a max-width & max-height of 100% to the image. causing it to never overflow the parent div [box] without losing the aspect ratio of the image. (if you'll try to do this with width & height you will lose the ratio)
Edit: padding:none; is not valid. use padding:0; instead
So, to summarize, change this in your CSS:
#custom-list .custom-list-element
{
width: 50%;
height: 200px; /* fix any height you want*/
float: left;
background-color: #333333;
text-align: center; /*so the image will always be centered in the div*/
position: relative;
}
#custom-list .custom-list-element img
{
max-width: 100%; /* the width never overflow the div*/
max-height: 100%; /* the height never overflow the div*/
}
#custom-list .custom-list-element article p
{
padding: 0; /* valid value */
}
#custom-list .custom-list-element article h1
{
color: #fff;
padding: 0; /* valid value */
font-size: 1.5em;
}
and finally, because I like Fiddles so much.. http://jsfiddle.net/avrahamcool/tjwHk/1/
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.