So here is the website: a link
When you make your screen smaller and scroll horizontally... you will see my issue where everything within the "wrapper" gets cut off and then there is a whole bunch of extra blank space on the right... I'm pretty sure it's in the wrapper, but I'm not sure how to get this wrapper to stay still and not get cut off when the screen is minimized.
ANy help on this issue would be greatly appreciated... Thanks!
You should try to place your wave background image inside the footer class instead in an ul tag. Your footer id is already set to be 100% witdh so it should fill out the complete bottom of the page.
#footer {
height:275px;
width:100%;
margin: 0 auto;
margin-bottom:0;
background: #000 url(http://dropbuckets.com/wp-content/themes/Freshman%20101/images/waves.png) repeat-x 0 top;
}
Make sure the white in your wave png is not transparent.
You need to set a min-width on your body to that of the largest element on your page. In this case #access was 940px:
body {
background: none repeat scroll 0 0 #F1F1F1;
min-width: 940px; /* add this */
}
Related
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.
Alright so I have a page that's title always changes based on what person is logged in (their name is the title of the page). However because of the fact that the name is always going to be different that means that it needs to be positioned via the center of the text so that it will expand out horizontally both ways. I'm uncertain as to how to approach this and I have tried a few things however due to the variable length of the title none of the suggestions have panned out. So to give you the basics of where I'm at code wise:
#profteamName{
position:absolute;
text-align:center;
top:220px;
left: 550px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
text-decoration:underline;
I wouldn't be against using relative positioning. Just so long as it will expand horizontally.
(prefer to use absolute positioning long story there but I will take what I can get)
Thank you for your guys time.
Rather than positioning the div from the left side of the page, stretch it across the entire window (or container div on the page) using width:100%;. It'll take up the entire width and align the text - regardless of the length - in the middle of the div.
CSS
.header {
position:absolute;
text-align:center;
top:50px;
width:100%; /* take the width of the window or container div */
/* rest of your code */
}
Here's a CodePen mockup you can play with.
For the following site: http://mountainfoodstorage.com, when the window is maximized (wider than about 1520px), the page displays correctly. But if the window is thinner than about 1520px, a horizontal scrollbar appears, and if I scroll to the right, my layout appears messed up (divs that are supposed to span the whole width are cut off). The content of my web page is only about 1000px wide, so the horizontal scrollbar is kicking in about 500 pixels too early. I've inspected the page's elements to see if anything is bumping up the width to around 1520px, but I can't find anything that's doing this. Any ideas?
it's the #main-menu, width + left = 1250 instead of your site width. Remove the left style and add float:right to the ul
#main-menu {
position:relative;
left:265px; /* remove this */
width:985px;
margin:0 auto 0 auto;
}
#main-menu ul {
margin-left:0;
float: right; /* add this */
}
Add html, body {overflow-x: hidden;}?
here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}