I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.
I found a similar issues on stackoverflow
White space showing up on right side of page when background image should extend full length of page [closed]
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
Solution in both the posts are same
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body / background?. Don't seem to understand what is the solution for this!
Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?
Could anyone explain how I can set the html body in gatsby, to avoid this large white space?
Resolution 1366x768 area under the bounder is the whitespace
Resolution 1920x1080 area under the bounder is the whitespace
To add global styles (such as the ones you're talking about), you have multiple ways to follow. The easiest one is to use gatsby-browser.js file. I will provide a solution for your use-case based on my paths, adapt it as you wish.
Create a global.css file in /src/styles/global.css and paste your code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
In your gatsby-browser.js file, import your global styles:
import './src/styles/global.css';
Basically, you are adding global styles using CSS files for your project.
There's a huge lack of details in your question but I guess that white part is the footer of the site. Since you don't have any content pushing the footer at the bottom of the page, it appears flexible as it could.
P.S: I've committed How to add a dynamic class to the body tag in Gatsby.js?'s solution since you don't need to add dynamic classes. To make the footer always sticky at the bottom of the browser, you need to make a few adjustments. Wrap your <Layout> with something like:
import React from "react"
import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"
import '/yourStyles.css'
const Layout = ({ children }) => {
return (
<section className="site-wrapper">
<main>{children}</main>
<Footer />
</section>
)
}
export default Layout
And add the following CSS (in your /yourStyles.css or in your global styles)
.site-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1;
}
Basically, you are telling the wrapper (site-wrapper) to expand until filling the viewport (100vh). Since your main tag (change it to the desired class if needed) can grow free (flex-grow: 1) so your footer will be always at the bottom of the page because it's pushed by the rest of the flexbox column.
Related
Each page of my site has a footer (one for all pages), it has the parameter position: 'fixed'. Accordingly, this means that the footer is always attached to the bottom of the browser, regardless of the screen size and information on the page.
There is also a table on several pages of the site.
The problem is that sometimes a white gap appears between the table and the footer (this happens when testing on screens of different sizes, or simply when changing the browser zoom).
Yes, the most common advice is to add a min-height. And it kind of works. But in this case, with standard screen sizes, the distance between the table and the footer is large (yes, this is not a problem, but it is better to avoid this).
Therefore, I ask for your help in solving the problem.
The code below is responsible for the formation of the page and styles
export default function Devices() {
return (
<div style={styles.Style}>
<Table />
</div>
);
}
and the following code forms the footer
export default function Footer() {
return <Grid container sx={styles.Footer}></Grid>;
}
When I have this issue, I just style the body tag to match my main container, and set the min-height to 100vh.
This way the body will be its natural size when you have content, but will always fill the view port regardless of client screen dimensions.
In your example, it’s just
body {
background: red;
min-height: 100vh;
}
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
This is a pretty absurd question but has been bugging me for a while now. I am designing this website and I am just finishing off on the responsive/mobile view. Currently it looks okay but that's because I delete the images with display : none: when the view port becomes too small for the image to look good. (Can bee seen at drleilamasson.com/css/responsive.css)
The images I want to change are the book (under the book section) and the parrot (under the social section) If I were to not delete them they would just go over the text / embedded post I have and block the content. What I want to happen is that the book image goes above the text centered perfectly. I have fiddled around with the styles of these images but never been able to figure it out.
I hope you guys can figure it out! Thanks :)
You've already set a flexbox parent on the <section id="about">, so we can play with the direction and ordering of the children.
#media (max-width: 1065px) {
#about {
flex-direction: column; /* stack the children */
}
.leila-book-img {
...
display: none; <-- remove
margin: 0 auto;
order: 2; /* put the image container after the text */
}
.about-content {
padding-bottom: 1em;
}
}
I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.
Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!
I've developed a dead-simple pure-CSS solution to this now, located here. The solution is based on Skeleton 2.0.4 and basically consists of creating two separate skeleton containers/rowstacks: One for the header/body, another for the sticky footer.
Jquery
$(document).ready(function() {
var footerHeight = $('.footer').height()+30; // "+30" footer on to add space
$('body').css('margin-bottom',footerHeight);
});
Css
html {
position: relative;
min-height:100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
color: white;
background-color: #7bbc42;
}
If you prefer to have the footer only come into view if the user tries to scroll down to the very bottom of the page, put everything that goes above the footer into a single div that has a min-height of '100vh'.
It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.
In version 2 the images CSS properties inherited by default the parent's div properties.
Is this correct?
Bootstrap 4
For Bootstrap 4 use Sass (SCSS):
// make images responisve by default
img {
#extend .img-fluid;
}
answer updated for version 3
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive" to make your images responsive.
To make all images responsive by default:
css: add the code below under the bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: add the code below in your mixins.less:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
Carousel
img tags inside a carousel are responsive by default
Semantic rules
See also the answer of #its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547
As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.
Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.
Images inside p elements which require inline-block as suggest by #its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.
Excellent suggestion by #BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).
So, mine would look like this:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.
Got here after trying to figure out if it's safe to apply img-responsive for all images.
The answer by #its_me led me to think that it isn't safe to apply this for images under a p element.
This does not seems to be what the bootstrap team think.
This is why images are not responsive by default in bootstrap3:
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107