I need assistance finding the line of CSS I need to modify to increase the width of the main content container at smaller screen sizes. The problem I'm having is that in smaller screen widths the content does not extend to the width of the screen. Instead there is a pretty wide right hand margin. I would like to extend the content from the left side of the screen to the right to make better use of the screen space. Can someone tell me what line of code I need to change to fix this? Thank you!
The site is - https://www.shiftins.com
In styles.css, line 2982:
.content,
.content-sidebar-sidebar .content,
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 100%;
}
On line 1552:
.page.sidebar-content .entry {
padding: 40px 40px 40px 0;
}
Combined, these produce the effect you're seeing.
Changing the second rule to padding: 40px 0 40px 0; removes that large right padding but the form is still clipped. The form is contained in an iframe and is fixed at 500px wide. Based on the structure, I'm guessing the form is out of your control. Adding min-width:500px; to the second rule makes the page width wider than the screen, but prevents the clipping of the form.
Related
I have a ReactJS/MaterialUI webapp I'm building. I want to add space on the left and right side of my page (to look like any other page, including stack overflow). I don't know if the best practice is to add padding, or a margin. Then on mobile, I wouldn't want the space.
One idea I had was to add blank grid sections on the left and right side with breakpoints where they don't appear on mobile. I'm not sure what's considered the best approach here.
You can use max-width: 1200px and margin: 0px auth; on the element which wraps the entire page to achieve this.
The margin: 0px auto will add 0px margin top and bottom, and center the right and left margin.
<div className="page_wrpr">
.......
</div>
.page_wrpr {
max-width: 1200px;
margin:0px auto;
}
.container{ width: 900px; margin: 0 auto; }
The margin will give your container a top- and bottom-margin of 0. The auto-value that however much horizontal space remains after you've used up 900px, will be evenly split to add the whitespace on each side of the body.
I have a page and I want to eliminate the scenario where it scrolls left to right. No matter what resolution I view it on, it leaves about 70px of white-space on the right. On the page http://bitfilmfund.com/ I have set
for the city image background part, I have already set the body to be:
#baner {
min-width: 100%;
float: left;
background: url(../images/city-backgound.jpg);
margin-top: 0px;
}
html {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
I also did a media query where I defined the CSS to resize the image based on a max-width of the viewport, such as:
#media (max-width: 1600px) {
#baner {width: 100%;
}
}
to get the city scape image to stretch the screen, and tried smaller sizes too for smaller res's, but it just does not work.
There is consistently a patch of white space at the right. Even if I set the CSS width's to be as high (high number for width, that is) as they can be until the screen is filled, I still have the left-right scroll. I want the images and background to resize to fill the screen and create no need for left-right scroll. Why don't this CSS works?
Quick Fix:
The first <div> with class='row' is causing the page to scroll horizontally; more specifically:
margin-left: -15px;
margin-right: -15px;
will cause this unwanted whitespace and horizontal scrollbar.
Additionally, the margin on the <body> should be set as:
margin: 0px;
in order to avoid some browsers (Chrome, for example) applying the 'default' margin that they like to apply.
Longer (surplus) fix:
Whilst the container elements on the page are re-sizing dynamically, a fair amount of the content is not. (Including the banner image as mentioned and the iframe containing the video.) The user's viewport size should be taken into consideration, in that when viewed from a smaller ~<1675px width the top navigation bar refuses to resize down and instead creates the horizontal scrolling issue. These problems can be fixed by using percentages rather than px, as I am sure you are well aware, (considering the usage of percentages on container elements).
Obviously, the screen size cannot resize down indefinitely - a limit has to be drawn somewhere. According to W3Schools, most browsers are now above the 1024x768px as a minimum, even Google doesn't resize down to this level however. It's up to you to choose where the minimum size lies for your website; but the more all-encompassing, the better.
Banner image:
This should be a fairly straightforward part, the following CSS properties should be of use to you, when added with the CSS that defines the image to be displayed:
background-size: 100%;
background: //your-image-location// no-repeat;
This will however, become stretched or compressed depending on the browser size, but is a good starting point for resolving the issue.
I've started to create a new homepage and I realized that my old methods of creating said webpage were outdated. While learning about positioning divs in css I stumbled upon a problem I really find hard to crack.
On my webpage I want to have a picture div next to a text div, I want this text div to be a minimum of 500px, but I don't want it to stretch unless the screen is wide enough to show both the picture and the text(I got this working). The problem I get is when I want to make the screen smaller, I want the text div to decrease in width until it hits 500px, if the user then shrinks the screen more the text should then, and only then overlap the picture.
Here is an example of something similar.
http://jsfiddle.net/mnSGZ/1/
The problem is when shrinking it, I don't want the horizontal scroll to appear until the black square is covering the whole gray squares width.
I understand that 'margin-left: 200px;' prevents exactly this but is there some sort of max-margin to make this work?
code from jsfiddle:
#container {
background-color: gray;
margin: 20px;
min-width: 700px;
height: 300px;
}
#nav {
background-color: black;
margin-left: 200px;
height: 50px;
}
Use CSS3 Media Queries to style elements based on screen resolution. This link may help you:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
This site: http://dev.calffl.org
Three bottom widget boxes labeled test, test 2, test 3.
Notice how the box extends down into the footer and overwrites the footer in a bad way?
That needs to go away, and the boxes should be 210px tall, with 90px of overlayed text/transparency anchored to the bottom.
I'm losing my mind apparently.
Your .block have a fixed height, whilst it's children elements have an even higher height, thus overflowing it's parent, and the wrapper too.
By removing the fixed pixel height on the .block, and setting a float on it's wrapper:
.homepageBottomBox-widget-wrapper {
margin: 0 auto;
width: 100%;
float: left;
}
Then the site wrapper will follow suit, although I'm not 100% sure on what you need on the styling of the transparency part. But I've added a picture to see if that's what you're after.
Made an improvement on the transparency by:
Adding position:relative to your widget_sp_image class (or just widget class)
Setting position:absolute;bottom:0px to your widget_sp_image-description class.
On my one page website at http://s361608839.websitehome.co.uk/pt-build/templatebuild/ if you click on a top menu option the page scrolls down to each section on the page.
Problem when it does scroll, the top part of the page is covering up the top part of the sections.
Is there anything I can do to my CSS to stop this from happening?
Thanks.
Replace some of your margin with padding. When jumping down the page to anchor spots like this it jumps to the edge of the inner box, outside of padding and inside border / margin. What you need to do is move that imaginary line up away from the content inside the div, so increase the padding and decrease some margin to keep the design working.
I did some playing around with your site, modifying to see how it would work for your trainingsessions section, I got this CSS:
margin-top: 0;
padding: 120px 350px 30px 0;
To adjust it with pure CSS, add an additional 151px (the height of your #topwrap element) to the padding-top of each navigable div. Then subtract 151px from the margin-bottom of each preceding navigable div.
A simplified version of this (you'll need to do the math to make it work with your already existing margins and paddings) would look like:
#div1 { /* first navigable div */
margin-bottom: -151px;
}
#div2 { /* all intermediate navigable divs */
padding-top: 151px;
margin-bottom: -151px;
}
#div3 { /* last navigable div */
padding-top: 151px;
}
Alternatively, you can adjust the scrolling position in the javascript by the 151px height of the #topwrap.