Here's my website:
www.lukassuarez.com
I use the code below on my gallery to create a horizontal scroll. The only problem is there is a lot of white space at the very end.
Simple question - how do I delete the white space?
<style>
.sqs-gallery {
overflow: scroll;
}
body {
background-image: none;
}
.sqs-gallery-design-strip-slide {
padding-left: 3px;
padding-right: 3px;
}
</style>
<script type="text/javascript">
$( window ).load(function() {
w = $(".sqs-wrapper").width();
$(".sqs-wrapper").width(w/2);
})
</script>
If you can only edit the CSS, you can hide the elements you are not using and set lower padding and margin to other elements.
You can easily see which elements take up the white space by using your browser's developer tools and inspecting the undesired white area.
In your case, you can see a footer with no content, only empty HTML tags with min-height: 34px;. You can also see div element with ID 'page' with padding: 50px 0; and div with ID 'canvas' with padding: 20px;
Example CSS:
#footerBlock {
// Remove min-height
min-height: 0;
}
#page {
// Lower bottom padding
padding: 50px 0 20px;
}
Other possibilities are to fill the footer with content or remove the footer entirely, if you have access to HTML files.
Related
Is it possible to achive the following configuration in CSS please ?
I have a long page with a footer in the bottom (the footer display property is flex)
In the visible area of the page I need the fixed area to be always in the bottom as long as the scrolling has not reached the footer.
Once the scrolling has reached the footer, the fixed area should scroll up to be on the top of the footer like in the following screenshots:
The fixed area is in the bottom of the visible region of the page.
When scrolling, if the footer is not reached, the fixed are will remain at the bottom of the page
When reaching the footer, the fixed position is on the top of the footer
I tried something like:
FixedArea {
position: fixed;
bottom: 0;
width: 100%;
}
but when I scroll until the footer the fixed region disappears.
You can nest the body content together with the fixed content in a element that has a height: 100vh on it, and overflow: auto on the actual content of that page, in that way the content will scroll independently of the fix element, and once reached the end the body scroll will continue on till the end of page (footer)
I created an example. Try: https://jsfiddle.net/pvviana/wwc8LgLm/
I am changing the div css property "position" at the bottom of page.
Code:
<div class="foo">Hello</div>
<footer>OKAY</footer>
Javascript(Jquery):
var $logo = $('.foo');
$(document).scroll(function() {
$logo.css({position: $(this).scrollTop()>100 ? "relative":"fixed"});
});
Css :
.foo {
position: fixed;
bottom: 0px;
}
Here is a (another) possible jQuery solution.
During scroll, calculate the distance remaining until the bottom of the window, and start setting the bottom style property on your fixed area the height of the footer minus the distance remaining, otherwise make sure it's set (back) to the original, as follows (note, I set the height of the content block to 800px, so make sure you try this so that the result window has a smaller height than that):
var originalBottom = 0; // get this depending on your circumstances
var footerHeight = 72; // get this depending on your circumstances
$(window).scroll(function () { // start to scroll
// calculating the distance from bottom
var distanceToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if (distanceToBottom <= footerHeight) // when reaching the footer
$("#fixed-area").css('bottom', (footerHeight - distanceToBottom) + 'px');
else // when distancing from the footer
$("#fixed-area").css('bottom', originalBottom + 'px'); // only need to specify 'px' (or other unit) if the number is not 0
});
body {
padding: 0;
margin: 0;
}
#content {
height: 800px;
}
#fixed-area {
position: fixed;
bottom: 0;
padding: 5px;
margin: 5px;
border: 1px solid green;
width: calc(100% - 22px); /* padding (2*5) + border (2*1) + margin (2*5) */
text-align: center;
}
#footer {
height: 40px;
position: relative;
bottom: 0;
padding-top: 20px;
margin: 5px;
border: 1px solid black;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-area">Fixed Area</div>
<div id="content"></div>
<div id="footer">Footer</div>
I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.
My staging site is here http://7a9.007.myftpupload.com/
If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)
I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?
Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.
style.css
.home #main-content.trans-header, .page #main-content.trans-header {
/* margin-bottom: -89px; */
}
layout.css
.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
position: relative;
/* top: -149px; */
}
#header-wrap {
position: absolute;
background: #29333d;
width: 100%;
}
To reduce the white-space for the both pages, pull the footer up using negative top margin like this:
#footer-widgets {
margin-top: -100px;
}
And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:
.vc_custom_1492563370829 {
margin-bottom: -50px !important; /*add this*/
border-bottom-width: 0px !important;
background-color: #1c89ab !important;
}
I'm trying to create my page so that there are background images covering the side of the page while having nothing in the center as that's where the content will be. I want these images to stay fixed where they are, even if the user resizes the window so they're off-screen. I know how to at least set up the images but not how to keep them in place.
I think one example I can think of is how http://www.halolz.com/ is set up.
Usually the way this is done is by applying a background image to the HTML body and then placing all the content of the page into a container that's centered on the page.
HTML:
<body>
<div class="container">
My content
</div>
</body>
CSS:
html, body {
padding: 0;
margin: 0;
}
body {
background: red; /* change this to your background image */
}
.container {
background: white;
width: 400px; /* adjust this to the proper width */
margin: 0 auto;
}
JSFiddle: https://jsfiddle.net/13xaqh6z/
I have a table that extends off the edge of the screen, but the body only gets as wide as the screen, causing the table to overflow it.
Demo: http://jsfiddle.net/6REkj/
<html>
<head>
<style>
table { background-color: lime; }
body { border: 2px solid blue; }
</style>
</head>
<body>
<table>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</table>
</body>
</html>
This is one of those things that make me think CSS is broken. I thought containing elements were supposed to expand to fit their contents.
Question 1: Why is it doing that?
Question 2: What should I do to get a margin between the table and the right edge of the page?
if you set display:table; to body or html, it will allow to grow its width over the 100% of viewport. it will just expand like a table does :)
html {display:table;width:100%; /* need to set a width to 100%, wich means here a min-width since it is displayed with the same specifities thas has a table , it shrinks and expand according to its content */}
http://jsfiddle.net/6REkj/1/
other options :
display:inline-block;min-width:100%; on body : http://jsfiddle.net/6REkj/3/
position:absolute;min-width:100%; on html : http://jsfiddle.net/6REkj/4/
Edit nowdays, min-width:max-content would do . http://jsfiddle.net/bj4wk6m2/
It's very strange that the simplest solution hasn't been mentioned:
body {
width: fit-content;
min-width: 100%; /* because the content might only be a few words */
box-sizing: border-box; /* because 100% + padding > 100% */
}
Unfortunately that doesn't work everywhere and it still requires prefixing. In Chrome (with Blink these days) that would be: -webkit-fit-content (-webkit- in Blink, weird).
CSS isn't broken, the behaviour you are seeing is by design.
Some quotes from the link above:
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
..
If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
From this I understand that block level elements have a default width of 100% of their containing block if all of the other properties are not set.
<body> is by default a block level element.
You could set float: left; or display: inline-block on body and it will grow with its content.
Here's a jsFiddle.
To answer question 2 (to get the result of the accepted answer without resorting to setting display: table on an element which isn't a table), you could do it this way:
CSS:
html {
padding: 10px;
}
html, body {
margin: 0px;
}
body {
border: 2px solid blue;
display: inline-block;
min-width: 100%;
box-sizing: border-box;
}
table, p {
background-color: cyan;
}
Here's a jsFiddle.
The only solution for this is to have a vertical scrollbar.
It can be achieved with an additional div, wrapping the table.
This would be the css:
body { border: 2px solid blue; }
table, p { background-color: cyan; width: 100%; word-wrap:break-word;}
div { width: 100%; overflow-x: auto;}
If you would only have the p-Tag, the attribute word-wrap:break-word; helps.
You can also move the paragraph outside the div, which allows you to see the whole content without scrolling.
See the fiddle for a working sulution:
http://jsfiddle.net/WrbpJ/
If you prefer scrolling the whole page, and not only the div, this can be used:
body { border: 2px solid blue; display: table;}
See http://jsfiddle.net/sGH4t/
If you don't want the scrollbar at all, you'll have to use lists or divs instead of a table.
The way you have used tr and td tags, the data in table is bound to overflow.
You have to decide how many rows and colmuns your table should have, when you are using simple html table. just put tr and td tags accordingly, and then you are done.http://jsfiddle.net/6REkj/Fiddle
I'm looking to position a Google Maps div with a sidebar on the right that displays listings. I want to make it so the window doesn't scroll, and the contents on the page are fluid when resizing the screen.
I have previously attempted to use box-sizing like the following:
#map-wrapper * {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-khtml-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
}
#map-container {
position: absolute;
width: 100%; height: 100%;
margin: 0;
overflow: hidden;
border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
}
This starts to become a nightmare when trying to have a scrolling list in the sidebar. Does anyone have a good solution, or am I on the right track with box-sizing?
Box-sizing is purely optional for something like this. There are many ways to go about it, but I have one favored method that is simple and works well in old browsers like IE6.
For the various frames you are trying to create (sidebar and Gmaps/content frame) create a css rule that sets position:absolute; overflow:auto;. Now you can take advantage of a cool trick in CSS absolute positioning. If you set both top and bottom in CSS, the height is automatically calculated. Same goes for widths using left/right. So to make our two divs 100% height set top: 0; bottom:0;.
If you want the sidebar to be 300px wide and anchored to the right, then set width:300px; right:0;. For the content div, set right:300px; left:0;.
Now you need to prevent the body scrollbars from appearing. First of all, you will need to remove the default margin/padding from body by setting them to 0. Also, you need to set html & body to height:100%; (100% equals the viewing area height), other wise they default to auto which is the content's height. It is also wise to add overflow:hidden to body, since some browsers think `body{height:100%;} means they need to show scrollbars.
Here is a quick mockup on JS fiddle showing you how this works.
Elimn's suggestion did not work for me, but the following did (I created a header bar above the Google Map):
body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
#map-canvas { height: 100%; overflow: auto; }
In the body:
<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>