Here is my site - http://www.aspenwebsites.com/majesticpines/about/
I noticed if I reduce the height of my viewport the bottom area of my sidebar (the one with email subscription field) overlaps my site's navigation.
I was wondering if there is a way to set up some minimum height for the site, so that if it reaches that value it shows scroll-bar on the right and doesn't reduce further, thus my email subscription form doesn't overlap with navigation links.
I tried to set up min-height:700px and overflow-y:auto for the BODY tag and also for .header-sidebar, but that didn't make any difference.
Could you advise what am I doing wrong here?
You could use css media queries.
// The CSS queries inside this #media will applied when the viewport height is lesser than 1001px
#media screen and (max-height: 1000px) {
// Reduce menu paddings and margins here
// Example:
.menu li {
padding:2px 0;
margin-top:3px;
margin-bottom: 3px;
}
}
The answer here is the one you have mentioned that it is not working - set correct min-height to some element. But you have to target the element which contains both navigation and the email subscription. If you set it to that element than it should work unless you are using some kind of wierd stuff which would overwrite its min-height (I can imagine javascript which would do this kind of stuff easily).
If you want more help then please share the corresponding code in fiddle where we can work the error out.
If you add "overflow-y: auto;" to your style for your <div id="navbar" class="navbar"> line (not to box-scroll which encases it), then a scrollbar will appear if the window isn't high enough to display your navbar. However the footer part of that area still overwrites the lower part of the scroll area. Is there a reason you separate the sign-up & copyright part from the nav? If you make it a part of the nav then it should just be part of the scroll area without overlap.
Related
I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
The problem is with the photography website I have created for some reason just on the "Contact" and "Bio" pages. It is only when the screen is resized so you will need to shrink down till the layout changes. Then when you hover over the menu tab "Albums" and the drop down menu appears it is pulling the content under it up slightly. It also creates a margin on the right that creates a scroll bar at the bottom. I have been combing through the CSS over and over trying to tweak things, can't find a solution though.
The website is:
"Bio" http://www.sairjanephotography.co.uk/bio.html
"Contact" http://www.sairjanephotography.co.uk/contact/contact.html
Also I just noticed the actual contact page drop down menu is hard to actually get onto with the mouse where as the Bio one isn't.
Any help appreciated
You can ditch the javascript approach, and just use CSS. Something like this would work; just apply left: 100% to get it on the right instead of below.
Edit: sorry for not reading the problem earlier. Your problem is that you have defined width on your ul element. On line 277, you have:
/*Re-centres the nav menu on phones from tablet*/
#media screen and (max-width:37em){
.menu ul{
font-size:4em;
width:18em;
}
}
But if you remove width: 18em, all is well, it appears.
To clarify on this, you shouldn't be setting fixed widths if you want to acheive a good mobile design. Instead, try to use tricks like text-align: center (coupled with display: inline-block, and display: block; margin: 0 auto;.
I think the other part of this question had to do with the hiding of the title. If you still want your header to show, you could either change its z-index to anything higher than the dropdown, or you could use an ajacent selector to give the main content a margin-top when the dropdown is active.
For example:
.menu.open + main {
margin-top 3em;
}
/* Add some transitions for show possibly */
main {
transition: 1s ease margin
}
I have a header with a small horizontal bar right underneath it that serves as the main navigation for my site. When the window is full sized it works perfectly. But if the window is resized even a little bit smaller, the right-most menu moves down to the next line, as you would expect any floated element to behave.
Question: How can I make it so the navigation bar always stays on one line, resizing appropriately to the window size? I've tried changing the lengths to percentages, though this often causes problems since there are many components to the CSS.
Here is all the relevant code: http://jsfiddle.net/HSVdg/1/
Here is what I think is the main culprit, though I could be wrong:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my question.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Any help would be immensely appreciated!
You can do this by using CSS display modes.
Just set the ul to have display:table
And the child list items to display: table-cell
The table cells will automatically adjust thir width to fill the parent table at any width.
You'll need to remove the explicit width from
<li>
and
<a>
to allow them to be automatic.
I've updated the fiddle for you: http://jsfiddle.net/HSVdg/13/
Hope this helps.
My page layout looks something like this:
<style type="text/css">
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="content-wrap">
</div>
You'll notice that the content-wrap div shifts its position a tad bit when the vertical scrollbar appears. One scenario is when the browser starts to progressively render the page without displaying the vertical scrollbar, then determines that a scrollbar is needed because the content is taller than the "fold". This shifts the div about 10px towards left.
What is the best way to tackle this problem without forcing the browser to always display the scrollbar?
I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.
A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.
If your site is "responsive" (reacts to width):
Step 1: Add width: 100vw to a wrapper element. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.
Step 2: Add overflow-x: hidden to the content element. This will remove the horizontal scrollbar (created when vertical scrollbar appears, to allow the user to "look under" it).
"wrapper element" is in our case referring to another div around your #content-wrap
Will work for your case too, tested:
<style type="text/css">
body {
overflow-x: hidden;
}
#wrap-wrap {
width: 100vw;
}
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="wrap-wrap">
<div id="content-wrap">
</div>
</div>
Make sure nothing useful on your page is wide enough to get caught under the scrollbar.
For example, you can ensure that the sum of (horizontal padding + border + horizontal margin) of the content element is wider than the scrollbar).
If your site is fixed width + centered (your case):
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
This will add a left margin equal in width to the scrollbar when it appears. Which is 0 when it does not. Taken from here, but tested.
You must use:
html {
overflow-y: overlay;
}
Only supported by WebKit (Safari) or Blink (Chrome, Opera)
Use jquery and put this in the start of your tag:
<script type="text/javascript">
function checkheight(){
if ($(document).height() > $(window).height()) {
//that is if there is vertical scrollbar
document.getElementById('yourcenteredcontainer').style.paddingLeft='8px';
//8px because the scrollbars are (?always?) 16px
}else{
document.getElementById('yourcenteredcontainer').style.paddingLeft='0px';
}
}
</script>
and call the function checkheight(); in the end of your tag plus wherever you have onclick (or other) events that make the page longer or shorter in height.
If you can use Javascript, you can set the width of the content-wrap to the inner width of the window minus the standard width of a scrollbar.
You will run into some problems though.
The user will have to have Javascript enabled
You don't know what the width of the vertical scrollbar is, especially if the scrollbar isn't there! So you will have to guess. 20px seems like a good guess.
Different browsers have different ways of telling you want the inner width of the window is.
So if you can live with all that, you can do something like this (in pseudo code)
if window.innerWidth is defined :
set the width of the div to window.innerWidth-20px
else if we're running on Internet Explorer :
set the width to document.documentElement.offsetWidth-20px
otherwise :
we're out of luck and we best leave the width as is.
First I would recommend optimizing the HTML so that it won't take so long to load/render. If load/render is fast the scrollbar won't appear "too late". What is it that takes long to load/render? Check the network tab in chrome debug tools (F12). Do an audit in Chrome debug tools.
There are multiple things that could make the document "reflow", and the scrollbar appear even though the browser could have known the necessary measurements right from the start. Are you using tables for layout - don't! They may need multiple passes of rendering. Do you have images without width/height specified? Then the document will need to be rerendered when each image loads. Specify <img ... style="width: ..px; height: ..px">. Is the CSS sane and efficient?
If you can't get load/rendering speed down I think your best bet is to not use the browser's scrollbar if javascript is enabled. That way you can control it and place it absolutely positioned so that it won't affect horizontal positioning.
Let your slider start of with display: none. Monitor dom ready event as well as image load events as well as window resize events. When the page has been loaded, images have been loaded and when window gets resized just run the same function every time. It would determine if the scrollbar is needed and either display it or hide it.
You could use JQuery UI Slider for example and set it's maxValue to $(document).height() - $(window).height(), monitor the slider change event and then scroll the body to the value of the slider and so forth.
If javascript is disabled the fallback will be the regular scrollbar and there's nothing you can do about the slight horizontal shift then.
But really I think the problem of the horizontal shift is too small to spend time fixing with a custom scrollbar, and check that it actually works well on all platforms etc. Do HTML/CSS optimizations first.
You can try this solution: https://stackoverflow.com/a/67213174/14302216
But the widths can't be relative. Probably, width:100vw will work for the parent, but I'm not sure how you would set the child width. I'm afraid calc(100vw-16px) will not work. But if you can set like widht:800px for the child, it will be fine!
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }