Ensure that the width and background fill the entire viewport with CSS

Hi there, looking for some assistance. I'm in the process of updating my online portfolio located at www.pxlmin.com/portfolio

My issue is with the background color on my page. Currently, it fills the entire width as desired. However, when I resize the window to be smaller, there's white space that appears off to the side when scrolling to the right. I'm trying to figure out how to make the background extend beyond the center and container areas to the left. Even though I have set the width to 100%, it seems like that isn't working properly. Any suggestions would be greatly appreciated. Thank you.

css

Answer №1

If you take out the width: 100%; in the CSS for both #portContainer and #middlePort, it should help resolve the problem you're experiencing.

Answer №2

To give the body tag a main background color, you can add the following CSS:

body{
margin: 0;
padding: 0;
background: #EFE6D9
}

Alternatively, you can use a background image with stripes included. In this case, make sure to remove the 100% width or set the left and right borders to 0. The white section is likely 6 pixels, which accounts for the borders that are added to the width.

#middlePort {
background: #E8DED0;
height: 300px;
border: 3px solid #E2DAD0;
padding-top: 49px;
}

or 

#middlePort {
background: #E8DED0;
height: 300px;
width: 100%;
border-bottom: 3px solid #E2DAD0;
border-top: 3px solid #E2DAD0;
padding-top: 49px;
}

Answer №3

Success! I finally cracked the code... all you have to do is set a minimum width that exceeds the content you want to fill with the background. In my situation, I used min-width: 1500px; for div #middleport.

It's surprising how many websites struggle with backgrounds falling off the page when the viewport is narrowed and scrolled to the right. Websites like tinygrab.com and nodejs.org are just a couple of examples.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

css

Alignment of grid with absolute images in Bootstrap

Hello there! I am relatively new to the world of coding and also to this platform, so please forgive any mistakes I may make along the way. Recently, I've been working on a project to create a site similar to Picrew, but I seem to have hit a roadblock ...

htmlcsslayoutalignmentbootstrap-5

Prevent one individual cell in a table from dictating the overall table width

A B A B A X A B In a contained block with a fixed width of 400px, there is a table. When the browser width drops below 421px, the width of the containing block changes to 95%. The cells labeled "A" and "B" contain simple text. There is one cel ...

css

Upgrading the grayscale filter to 100% in Internet Explorer 11

Recently, I learned that the support for the grayscale(100%) filter was eliminated in Internet Explorer 9 and later versions. Can you suggest an alternative filter that I can use for .svg format images instead? ...

csssvg-filters

Adaptive Style Sheets Strategy

The images below depict the concept I am trying to achieve. The first image shows a longer width while the second one represents a shorter width. The red blocks are positioned on the right and left sides, with the yellow block adjusting its width based on ...

css

Troubleshooting Problem with Web Forms and Bootstrap Form Design

Currently, I am utilizing a simplified version of the Admin LTE Bootstrap Theme in an ASP.NET Web Forms Project. In this project type, only one form tag can be used per page. The form tag must encapsulate both the Top (Nav) and Bottom (Side Bar Left & Mai ...

cssasp.netformswebforms

Trouble Centering DIVs Using Flexbox

Thank you for taking the time to help me with my question on Stack Overflow. I am new to using this platform, so please be patient with me. I am facing an issue where I cannot get my divs to align in the center of the screen despite trying various solution ...

htmlcss

using outlines for FontAwesome icons in React Native

I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly. import IconFA from 'react-native-vector-icons/FontAwesome'; < ...

javascriptcssreactjstypescriptreact-native

Customize the background color of a particular select element within an array of dynamically created select elements

I've been experimenting with jQuery to dynamically adjust the background color of a select element based on the chosen option. The select elements are being generated using the following code: while ($qrow = $qquery->fetch(PDO::FETCH_ASSOC)) { ...

phpjqueryhtmlcss

How to Stop Element Flickering While Hovering in Selenium IE Webdriver

My code is functioning perfectly in Firefox, but when I try it on Internet Explorer, there is flickering. Here is my code: WebElement mouseOver= driver.findElement(By.linkText("abc")); //I'm locating the element by link text. Selenium finds the ...

javascriptjqueryhtmlcssselenium

"Optimizing Background Images with IE 8 Stretch Cover in Bootstrap

Page Broken I've searched all over Stack Overflow for a solution to resolve this background image issue. I'm using Bootstrap for the boxes and removed any margins. The problem arises when setting the background as cover; in IE8, it doesn't ...

htmlcssinternet-explorer-8

The resizing feature of Bootstrap Carousel does not support images

I am using the Carousel feature in Bootstrap, but it is displaying the images larger than their original size. I am trying to resize the images within the Carousel using the following code snippet: .carousel .item.left img{ width: 80% !important; } ...

htmlcssbootstrap-4

Trouble with Bootstrap Modal not closing properly in Chrome and Safari

ISSUE: I'm facing a problem where clicking on the X (font awesome icon) doesn't close the modal popup as expected. https://i.sstatic.net/yXnwA.jpg LIMITED FUNCTIONALITY ON CERTAIN BROWSERS: Currently, the X button for closing the modal works o ...

javascriptcsstwitter-bootstrapbootstrap-4bootstrap-modal

Trouble with Background Image Display in Internet Explorer 8

I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...

javascriptjqueryhtmlcss

Looking for assistance with arranging and managing several containers, buttons, and modals?

My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first b ...

javascripthtmlcssbuttonmodal-dialog

Is there a way to move a placeholder to a small label in the top left corner when an input field is being used?

I've been searching for functional code, but everything I've tried so far hasn't worked. Does anyone have expertise in creating this animation using React? ...

htmlcssreactjsanimationinput

Instructions on creating a "ripple" effect on a webpage using CSS

I am attempting to create a wavy border effect where two sections meet on a page (refer to the image below). What is the most effective way to achieve this? The waves should be uniform in size. EDIT: To whoever flagged this as 'already answered' ...

htmlcsssvgsass

Positioning elements using CSS Flexbox within the body of a modal dialog box

Hey there! I'm trying to achieve a specific style using flexbox, but I'm having trouble with placing the modal close button on top of the image. If anyone has any tips or guidance, I would greatly appreciate it! Here's what I have so far: ht ...

cssreactjsflexboxmodal-dialog

Sorting table data by Table SubHeadings using Jquery

Utilizing jQuery tablesorter in my UI, I encountered a challenge with a table that has 2 rows of headers - one main header and one subheader. My goal is to enable sorting on the subheader. How can I achieve this? Below is an example of my code structure: ...

jquerycsstablesorter

Update the picture displayed in the parent div when it is in an

My code currently changes the image when a parent div is in an active state, but I'm struggling to figure out how to revert it back to the original image when clicked again. I attempted to use 'return false' at the end of the script, but it ...

javascripthtmljquerycss