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;}?
Related
I want the main nav menu to be at 1 line on all screen not only big screens, and i want the home page to be 1 page static with no scroll only cover and footer.
This is the site: http://alaa.x10host.com
I have tried so many ways, like display flex and width 100% for container and for nav menu, but I tried alot and nothing works
display:flex;
width:100%;
font-size: 1vw
A full 1 static page no scroll and full menu on all screen sizes.
As for the menu - add this line to your css
#media (min-width: 960px)
.row .primary-menu-ul>li {
width: inherit;
padding: 10px 0;
width: 20%;
This will tell all li elements that they cannot be more than 20% of their parent element and since you have 5 menu items they will always take 100%.
as for the scroll - you need to adjust ALL sizes related to paddings and margins from px to % / em and get rid of the min height css rules for inner container (I am referring to the one with background image). Like here:
.elementor-159 .elementor-element.elementor-element-1dd43d0 > .elementor-container {
/* min-height: 34vh; */
}
I commented out this rule. Also saw some paddings set up in px as well as font sizes. Main issue with this website that inner container is not 100% responsive that's why you may see vertical scroll on mobile devices.
On this website, http://usher1f.org/ , in mobile view or in a view when the browser is narrowed to 800 px width, the navigation sits off to the left. How can I make the navigation be centered horizontally?
The usual way to center something using CSS is to set the width to some value, then set the left and right margins to be 'auto', in the case of your site, the following should be included in the #cssmenu CSS rules:
#cssmenu {
width: 451px;
margin: 0 auto;
}
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}
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 */
}
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.