I've been trying to code a website to have the main section fill 100% of the screen on all devices (i.e. the logo, navbar, slider and quote fill the whole screen, then you scroll down and the next section is 'Contact Me'). On my laptop screen and iPhone 6 it looks correct, but on smaller mobile screens (and when I resize my browser to a small size) the 'Contact Me' section seems to collapse over the other content.
I've tried setting a minimum width on the div (as that's what many of the suggestions seem to be) but with no luck.
I've attached a link to the website, any suggestions would be much appreciated.
http://176.32.230.9/andycheckcheck.co.uk/homepage.html
You have this CSS rule in there:
.firstSection {
height: 100%;
width: 100%;
background-color: #EDF4ED;
}
Change height to min-height in there and add height: 100% to body:
.firstSection {
min-height: 100%;
width: 100%;
background-color: #EDF4ED;
}
body {
height: 100%;
}
If you don't want the words to collapse in the white space, I suggest adding a white-space: nowrap style to your h2 "Contact Me" element.
CSS:
.nowrap {
white-space: nowrap;
}
HTML:
<h2 class="nowrap">Contact Me</h2>
Related
I want my vuetify application content (not the navigation or toolbar) to be scrollable horizontally and vertically to reveal a large grid (much like an iframe or frameset would):
https://cawoodm.github.io/powowshell/ide/
The main grid is rather large (9x9 200px squares + padding) and the requirements are:
The content area (yellow) should use all the remaining width and height of the screen (max-height: 100% not working like I think it should)
The user should be able to scroll that (yellow) content area (see pink scrollbars) to reveal the entire grid
The problem is I only get a vertical scrollbar along the entire height of my window (which I don't want) and, when I scroll that to the bottom I get my horizontal scrollbar (albeit grayed out).
I've hacked together a codepen which kind of shows the problem but ultimately I'd like the corrections required to the URL demo linked above.
HTML
<v-content >
<v-layout fill-height fill-width>
<div id="scroll">
<div id="grid">81 200x200px blocks go here...
</div>
</div>
</v-layout>
</v-content>
CSS
#scroll {
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
overflow: scroll;
background-color: yellow;
padding: 10px;
}
#grid {
width: 2000px;
height: 2000px;
background-color: grey;
}
I tried inserting: word-spacing: 30x; to put gaps between words
body {
width:0
}
of the css but it does not work.
the attachment is the image of the website, be aware of the scroll on the bottom of the screen.
You need to give the body a specific width, not body{ width: 0}.
for example:
body{
width: 600px;
margin: auto;
}
this way the body will be 600px and in the middle of the screen.
with the navigation just give your (li) margin-left: 15px.
hope this will help.
I am creating a website under experimental.danielhons.de and have a problem when looking at it with small devices, like mobile devices or reducing the width of a browser window.
At some point, the page gets horizontally scrollable and on the right there is a whitespace.
Using Firebug, I see that it is the body-tag exceeding the screen, but I have used this css:
html, body {
max-width: 100%;
overflow-x: hidden;
overflow:hidden;
}
How can I prevent the page from being horizontally scrollable? Screeshot with overflow:auto
Add this css
body {
height: 100%;
overflow: auto;
}
html {
max-width: 100%;
}
I can clearly see that you have overflow: scroll; set on your body tag.
You can override only the x-axis specific rule by using overflow-x:hidden;.
I'm building a page that has a list on the left, and a container showing a single item's details on the right. Here is a sample image showing the page layout and the parts I want to scroll.
In both the left container and the right container, I need to scroll when the data exceeds the container's viewport height. I only want the red-highlighted containers to scroll--the outer blue container is fixed, and the yellow portion inside the blue container is fixed. Only the red containers' contents should scroll, only when applicable.
I've put up a codepen where I'm playing around with it and can share it with you (the app itself is behind firewall, codepen is the best I can do). What you'll see on the codepen is that I can get the container to scroll when I set it's height (in this case, 380px, which is loosely about how much space is there on screen). If you move the sample codepen's container up, you'll see the scroll area stays fixed (duh), and if you increase the height of the scrollable container beyond 380px, once you go below viewport, scrolling starts to go away--at around 800px or so it completely goes away.
What the heck am I missing here? The blue containers should size themselves to the bottom of the viewport, whether it's 800px high or 1600px high. Then The red container's height would fill that available height inside the blue container, and scroll if necessary.
I'm really stumped on what I'm missing here.
Edit: jQuery and javascript sizing are not options. This is achievable by CSS only, I'm just missing some property somewhere and am stumped.
Edit 2: I tried the suggested html (html: height:100%, etc). It works in codepen, but when I attempt it on my full version of the site, it doesn't work. In the screenshot here, you can see the blue high-lighted area is the scroll container in question, and the white bar on the right is the scrollbar (custom-styled background) but no actual scroll--just the bar background.
I have implemented a basic version which should help you out.
You can find the code over at https://codepen.io/hunzaboy/pen/aWmMeJ .
Here is the CSS
body,
html {
overflow: hidden;
}
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
width: 20%;
background: blue;
color: white;
overflow-y: scroll;
}
.content {
background: yellow;
color: brown;
overflow-y: scroll;
}
with css just use overflow-y:scroll and define the max height, or just height
.that-box {
overflow-y:scroll;
height: ###px;
}
--edit: and hide the scroll bar at a certain width
#media screen and (max-width: 1024px)
{
.that-box {
overflow-y:hidden; //this will cause clipping on content outside of the box
height: ###px;
}
}
--edit2: a CSS solution
html {
min-height:100%;
position:relative }
body {
height:100%}
.box {
position:fixed;
height:100%;}
The solution I like to use is through use of the view width (vw) and view height (vh) units. Using 100 respectively for each is the equivalent of your viewport's current size.
HTML
<div class="dashboard">
<div class="left-panel v-scroll">
<!-- the stuff on your left nav -->
</div>
<div class="right-panel v-scroll">
<!-- the stuff on your right nav -->
</div>
</div>
CSS
.dashboard{
width: 100vw;
}
.left-panel{
height:100vh;
width: 20%;
float:left;
margin-left: 20px;
}
.right-panel{
height:100vh;
width: 76%;
display: flex;
}
.v-scroll{
overflow: scroll;
}
This will ensure that they will scale according to how your screen size changes.
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.