White Space on the right of page - html

Hi everyone I've got this classic problem of a large margin of white space being generated on the right side of my site. Before anyone asks yes I have tried
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I've had zero luck. I've tried a lot of things and I can't for the life of me figure out what's wrong. I am very new to code so there's a solid chance I'm overlooking something or did something insanely stupid. At 1080p it's fine but on higher resolution displays it becomes an issue.enter image description here Here's a link to my work. https://github.com/NdigiG/Portfolio Thanks in advance for the help!

You are fixing your width in the body, header, and footer to 1920px, that is why on screens larger than 1920px, you are going to see white space.
If you want it to be responsive (dynamic) filling the whole screen, you would need to find all width: 1920px; and convert them to width: 100%;. These are in uhh.css file.

Related

Header Styling Not Responsive

I'm doing Facebook Ads for a client. I only know basic HTML & CSS, enough to at least play around.
The problem is the website header section (the black background around the logo and header menus) isn't responsive and cuts off at around 950px width and gets worse the closer you get towards a mobile viewport. The website is below.
http://www.vibrantrealestate.com.au/
I've got access to WordPress and FTP so I'd really appreciate some guidance on what HTML/CSS I'd have to adjust.
Thanks Heaps!
Edit /style.css line number 92
#main-wrap {
float: left;
/* width: 100%; */
height: 100%;
}
Just comment that width: 100%

blank space on right side of website, culprit is not visible

My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }

Website container won't align to the centre (Mobile and web)

Hoping that the community will be able to help me out here as I really am stuck. I've having 3 I issues with my website:
Website Link
For some odd reason - I can't get my columns to line up straight. The entire page seems to be more to the right than in the centre on both desktop and mobile
What I'm trying to do with the top image is have it take up the entire page upon loading, and then as you scroll, the image disappears. For some reason, on mobile, the image doesn't cut off and allows for the user to scroll to the right.
On mobile, I can't get the top image to show properly. It stretches vertically, and users have to scroll all the way past the photo to get to my content... I want the main image to resize like it does on a desktop browser and only take up the screen real estate when the page loads
Any advice here would be helpful...
In your projects sections - if that is where your issue is has padding on a UL tag - which is causing it to look misaligned.
You could do this to fix that section:
ul.skillssection {
padding-left: 0;
}
It'll be more helpful for the community if you made points or set up a jsfiddle.
Update - answer for number 2.
I can't seem to replicate it but I've noticed you've got:
img.bg {
min-height: 100%;
width: 100%;
min-width: 780px;
overflow: hidden;
}
I would change it to:
img.bg {
min-height: 100%;
max-width: 100%;
overflow: hidden;
}
So the max-width is always 100% and it should follow the width of the parent.

Need to fix an image to a specific spot on a page

I need to fix a .gif image to a specific spot on my home page. I've placed the image in my HTML, and "position:fixed" doesn't do what I want - the rest of the page's content scrolls beneath the image. I want the image to stay in the same place at all times.
Disclaimer: I know next to nothing about HTML & CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.
On a related note, my image changes size depending on what browser I'm viewing my site in. I read here in answer to another question that you can remedy that by using percentages instead of pixels to format your object, but I tried that and the problem remains.
Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is http://www.designartistree.com/ and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.
Any beginner-friendly advice would be greatly appreciated! Thank you!
Here's the html code that I have for the image:
<img src="/files/theme/ribbon.gif" alt="ribbon" style="position:fixed; margin-left:27.6%; margin-top:61%; width:63.7%; height:10%; z-index:50; visibility:show">
If you use position:fixed, the element is positioned relatively to the window, so even if you scroll, the element doesn't move.
If you want it to move when you scroll, use position:absolute.
But because of your layout, you have 2 options:
Place the image inside #box
Remove the following code:
html{
overflow:hidden;
height: 100%;
max-height: 100%;
}
body {
height: 100%;
max-height: 100%;
width: 100%;
}
#box {
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}

Lines in web layout for some resolutions

I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!
If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}
I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.