Putting box-shadow on site-wrapper - html

Here's the page that I'm having trouble with. You can see that when I scroll down the shadow is in the wrong place. http://michaelaharvey.github.io/
I'm trying to make my page have have box-shadow css property. However, I can't seem to make box-shadow apply to the entire webpage. As a result, when I scroll down there is a shadow in the middle of the page when there shouldn't be. I tried using...
#site-wrapper {overflow: hidden;}
...but that caused my page-jump navigation to break. How can I set the div height of site-wrapper equal to the entire page, including all the overflow? Thank you!!!

You have to make one more element that wraps up the .cover-container
<div class="site-wrapper-inner">
<div class="cover-wrapper">
<div class="cover-container">
....
</div>
</div>
</div>
then place its CSS like
.cover-wrapper {
height: 100%;
overflow-x: hidden;
}
since you use table and table-cell in .site-wrapper and .site-wrapper-inner
so you must add something to wrap the content in order to control its height

Related

Overflow-x: auto, without hiding content

I've just made this section of images, where you're supposed to scroll horizontal to see the different images, and by the looks of the following screenshot, this is visually almost the result I wanted, with a few style changes to come
Section without overflow applied: the result I wanted
However, when I apply overflow-x: auto, in order to allow horizontal scrolling, the section cuts off the images on the right hand side:
Section with overflow applied: NOT the result I wanted
How can I make the section horizontal scrollable but without cutting the images off on the right?
It is basically a flexboxed section with three images so far:
<section class="projectSlideshow">
<img 1>
<img 2>
<img 3>
</section>
.projectSlideshow {
display: flex;
flex-direction: row;
height: 75vh;
margin-bottom: 2.25rem;
}
Oh well, sometimes, the solution you're looking for is so simple that you don't even think of it.
I solved it by putting the <section class="projectSlideshow></section> outside of my <div class="content"></div> (which contains the text above and below the slideshow, which is using padding to push in the text (the section was inside of it at first)), making them siblings to each other, instead of the section a child of the div.
Putting the <section> outside of <div> makes it possible for the slideshow to go from border to border (100% width). Then just adding the same margin-left to the first image as well as the same margin-right to the last image as the padding of the text gives the exact result I wanted.
A quick video of the result.

How can I prevent horizontal overflow?

Say I have a <span> that contains a very long sequence of numbers - long enough that it flows right off the right hand side of the page.
Most browsers would give me a scrollbar such that I can then scroll left and right.
How can I prevent the ability to horizontally scroll?
I've tried body { overflow-x: hidden; }, which works for desktop Chrome, but Chrome for Android retains the ability to horizontally scroll.
How can I absolutely guarantee no scrolling?
(I can adjust both HTML and CSS in this scenario, but I cannot use JS.)
Do you mind breaking the string of numbers? If not, you can try word-break:break-all. Here's the same HTML with and without word-break.
#break {
width: 300px;
word-break: break-all;
padding: 3px;
}
#noBreak {
width: 300px;
padding: 3px;
}
<div id="break">
<span>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</span>
</div>
<div id="noBreak">
<span>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</span>
</div>
I think applying overflow-x :hidden works.
But unless you share the part of your code its difficult to answer to your requirement.
The better approach i would suggest is to use the container class of bootstrap 4, which makes the div responsive and you can keep this span inside that, or keep it in the div.
<div class="wrapper container">
<div class="row">
...
</div>
</div>
The row class will always give -15px margins.
and container class gives padding of +15px.
Your question can get a clearer response if you can share the code snippet.

CSS background does not fill all page properly when scrolled horizontally

So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.
I have this background problem where the background does not cover the whole page when I scrolled horizontally,
Here is the problem I have:
As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.
Here, the background is white when I scrolled horizontally. It does not cover the whole page.
Here is my Html code:
<div class="container" id="amethystBackground2">
<!-- contents here -->
</div>
Here is my Css code:
#amethystBackground2
{
position: relative;
background-color:#9B59B6;
//This is needed to remove white space on top of page
margin: 30px 0 0 0;
//This is needed to for the background cover the whole page when scrolled verticallly
//(when you have too much cards, you need to scroll down)
min-height: 100vh;
min-width: 100vw;
//This is needed give space on top of page
margin: 50px 0 0 0;
}
I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.
I also tried width:100% and 'height:100%', But it does not work.
Please help me, Thank you in advance.
The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.
First solution
Set your background-color to your body instead of your container div.
Just move background-color:#9B59B6 to
body {
background-color:#9B59B6;
}
Second solution
The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.
<div class="container-fluid" id="amethystBackground2">
<!-- contents here -->
</div>
More about container-fluid here.
You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:
<div id="amethystBackground2">
<div class="container">
</div>
</div>
Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.

divs inside divs positioning - no div fixed height

I know this is probably really simple, but i'm stuck on it for a while trying fiddle around with it.
Basically, this is my html setup :
<div id="main-div"><!-- Blue -->
<div id="sub-div"><!-- Red -->
<div class="content-div">
<p>This is the text. I need the button to be placed in content-div, which technically is, but it appers outside the div.</p>
BUTTON
</div>
</div>
</div>
Here is the fiddle with the CSS classes :
http://jsfiddle.net/03knuf7z/1/
What I'm trying to achieve is to have the <p> paragraph and <a> button both inside the sub-div surrounded by main-div
I've been trying to achieve this without a fixed content-div height, so I'm trying to put in height: auto; into my css hoping the content-div will stretch enough to cover both <p> and <a> elements, but that doesn't do the job, because the button still appears outside the content-div box, just like in the fiddle.
I can achieve the desired result by putting fixed height to the content-div, so if I'll change the auto in height: auto; to height: 150px;, it works and both elements, the paragraph and the button are in the box.
But thinking of responsivity on small screen devices, phone screens for example, I'd like to avoid fixed values.
Is there a way to do this without fixed height ?
You need to add an element with clear after the button with float.
You can add this to the HTML, or use the CSS :after pseudo-element to create a virtual element at the end of your content-div:
.content-div:after {
content:'';
clear:both;
display:block;
}
Updated fiddle
This can be fixed easily with a clear class. I have updated your JSFiddle.
I have added the following class:
.clear {
clear: both;
}
And this after your button:
<div class="clear"></div>
You can also use the :after property. Then you will have the use the following CSS:
.content-div:after {
display: block;
content: " ";
clear: both;
height: 0;
}
Add overflow-hidden; to .content-div.
.content-div{
font-size: 18px;
overflow: hidden;
}

Div height 100% with scroll bar

I am looking for a css way to hav this layout sport a 100% height div, meaning that the white will trail down to the bottom of the document not the window. I would like to do this without images and without javascript.
I've tried html,body{height:100%} which only applied to the window not the doc.
I've also tried to put a 900px body background image and it was not centered with the container div.
Looking at the live site because the URL is conveniently visible inside your image..
Add this CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
You'd need something like
<html>
<body style="height: 100%; overflow: hidden">
<div id="realbody" style="height: 100%: overflow: auto">
... page goes here ...
</div>
</body>
</html>
This way you disable scroll bars on the actual page body, and all the scrolling tags place "inside" the document on the "realbody" div. With suitable styling on #realbody, you can make the backgrounds stretch as you need them.
You can actually force the containing div to continue behind your other divs by using special separator divs with a clear: both; set in them. Like this:
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer
</div>
<div style="clear:both;"></div>
</div>
Use the where ever you want your wrapper to continue going down.
NOTE: I'm not sure whether W3c says that's good or bad practice, probably bad, BUT it works.
A sticky footer should accomplish this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
the question is a bit old, but, if you don't want to change body and html, and need an element with 100% height without scrollbar you can use this on the div:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.