The majority of the site displays well in all browsers including mobile except for the footer.
In 1600X900 dimensions the footer displays perfectly. On sites where the resolution height is below 900, the footer disappears. I've tried everything I could think of to have the footer "snap" to the bottom of the screen and am clearly out of my realm of expertise. Tested using the latest Chrome and Firefox with similar/same results (that is good I guess, LOL).
How do I have the bottom black elements snap to the bottom of the page?
URL of website: http://bit.ly/1ro8FtA
Screenshot at different dimensions: http://bit.ly/1uLGgNX
If I understand correctly (if you only want to move your Footer and not the all black region), try to change your CSS:
.agentpress-pro-black .site-footer {
background-color: #000000;
font-size: 16px;
padding: 40px 0;
text-align: center;
}
to this:
.agentpress-pro-black .site-footer {
background-color: #000000;
font-size: 16px;
padding: 40px 0;
text-align: center;
width: 100%; /*new*/
bottom: 0; /*new*/
position: fixed; /*new*/
}
NOTE
If you want all black region, then you should change your HTML, and move all your black region in order to have one positioning container fixed
Related
I'm completely new to front end and have been coding using html and css for 3-4 months.
I'm currently completing a free course on free code camp and I'm currently working on a technical document page.
My main issue is figuring out how to stop my body element from scrolling behind my nav bar which is positioned on the left. I want the body element to only scroll upwards/downwards.
my second issue is figuring out how to build my list items with the top and bottom borders surrounding the list items fully extending within the nav bar
here is my project --> https://codepen.io/kboogie/pen/zYzBwXa
Thanks for the help and sorry for poor explanation
body { line-height: 30px;
min-width: 100%;
font-family: Azeret Mono, monospace;
padding-left: 250px;
}
#navbar { position: fixed;
left: 0px;
top: 0px;
height: 100%;
border-right: solid;
border-color: rgba(44, 187, 0, 0.603);
background-color: rgb(223, 253, 170);}
header {
text-align:left;
}
.head-n { text-align: center;}
li {
padding-right: 10px;
list-style: none;
}
Here is a solution to your first problem. The issue comes from setting the min-width: 100% and padding-left: 250px. This will cause all of the content to be 100% of the width plus an extra 250px. This will always result in content that is too big to fit on the screen. That is what is causing the horizontal scroll bar.
To fix this you should remove min-width: 100% from body{}. There is no need for this style since the text will automatically wrap regardless of the size of the screen.
I made a top banner which is getting rendered in full width on web page, but when I try to see it in mobile view, the top banner gets shrieked by some percentage.
The html code written is like:
<style>
.top-banner {
width: 100%;
display: block;
text-align: center;
background: #fee768;
color: #555;
font-size: 16px;
padding: 10px 7px;
font-weight: 600;
}
.top-banner:hover {
text-decoration: none;
background: #ffc71f;
color: #846934;
}
</style>
<div>
<a href="https://www.youtube.com/...." target="_blank" class="top-banner">
Need help? Watch this Video
</a>
</div>
This works fine on the web page, but when I view the same page on mobile the top banner doesn't gets rendered in full width.
I tried adding position: fixed !important; to the .top-banner css class, using this the width gets fixed but the bottom content of the page gets shifted upwards, i.e. the bottom content of the webpage gets over the top banner.
Kindly suggest me some way to solve this issue.
If you don’t want other elements to appear above your top-banner, you can use
.top-banner {
z-index:1000
}
The higher the value of the z-index, the more the element appears on top of other elements.
did you tried removing padding and margin on mobile device ?
or
apply these style:
.parent-div{
display:flex;
height:320px;
width:100%;
}
.top-banner {
width:100%;
height:100%;
padding:0px;
margin:auto;
}
try to add important on your code
.top-banner{
width:100%!important;
}
it will force it to be 100% width
I think the reason is because "padding: 10px 7px;" take 7px more space in the left and right of the element.
To fix:
replace
padding: 10px 7px;
with this
padding: 10px 0;
In my body I have a #wrapper. I wanted to make the navigation bar which is fixed to the top, so inside the #wrapper I made new div #navbar that is transparent(70%). Next step was creating #content-wrapper inside #wrapper (a bit transparent too - 85%). And last one was #footer inside #wrapper that is fixed to the bottom of the site.
So the tree looks like that:
body ->
#wrapper ->
#navbar
#content-wrapper
#footer
Now, the CSS for #navbar:
width: 100%;
height: 50px;
position: fixed;
top: 0px;
left: 0px;
background-color: rgba(154, 210, 78, 0.8);
z-index: 100;
Everything works fine here I guess - #navbar is fixed, 100% width and has the inline-menu inside, which is 900px wide.
Now the CSS for #content-wrapper:
width: 900px;
background-color: rgba(255, 255, 255, 0.7);
height: 5000px; //just an example
margin: 70px 0px 30px 0px;
and the last CSS for #footer:
width: 100%;
text-align: left;
font-size: 12px;
font-family: "Calibri";
color: white;
text-shadow: 1px 1px 5px #3a3a3a;
position: fixed;
left: 25px;
bottom: 15px;
nothing special, just ordinary fixed footer I guess.
When I start scrolling down the page, the #navbar is overlapping the #content-wrapper and because the #navbar is a bit transparent, you can see the #content-wrapper through it. It not so bad at the end, but I want this website to be as perfect as possible, so I don't want the #content-wrrapper to be seen through it. I was looking for the answer for so long and I saw a lot of similar cases, but actually nothing worked for me. I was trying to implement the position: relative or absolute and overflow: auto onto the content and I was setting up the top: 70px, just to make sure content is below my #navbar - nothing. Tried some jQuery scripts, but they weren't so good, because they were just changing the opacity for the divs that are scrolled up. I can't think about any other solutions. Maybe my div's tree is bad, maybe I implemented the codes badly, but I was checking it with inspect-element function in browser, I was double-checking the code and nothing happened, I could still see the #content-wrapper underneath the #navbar. I'm not showing the HTML here. I'm sure everything is correct there. I'm looking for any solution - it can be some js script, php script, css code, etc. Thank you for you answers.
You should remove the transparency of from the #navbar I guess. So that you can’t see anything through it. And add a solid background to it like this:
background: rgb(154, 210, 78);
This happens only when I do a selection in the page and move the mouse to the right. Can you help? please look the attached picture.
In order for us to help you, you should be posting code snippets instead of a link to your website. It's against the rules as #Harry stated to do anything otherwise.
That said, I think the issue is coming from the fact that you're using elastics widths with your site. Keep in mind that when you do this, you need to watch your padding as in some browsers, they expand the widths beyond the max screen size.
I think the issue for you is coming about as you have:
article.header {
background-color: #1949CF;
padding: 3px;
padding-top: 7px;
}
coupled with
.module {
width: 100%;
float: left;
display: block;
clear: both;
}
both being called near the beginning of your code:
<article class="module header">
Thus, the padding: 3px; is extending the width: 100%; set by .module to essentially overflow your container.
To see this, use the Chrome -> Inspect Element tool by right clicking on your website. By hovering over your <article class="module header"> section, you will see that the width being shown is beyond the max width of your browser window.
This may not be the only spot in your code that needs fixed, but this should get to on the right track of how to debug your issue.
You can set the body's width at 100% with overflow: hidden.
body {
background-size: 100%;
background-position: center 1%;
background-repeat: no-repeat;
font-family: "Arial Narrow", Arial;
font-stretch: condensed;
font-size: 0.9em;
text-align: center;
overflow-x: hidden;
padding: 0;
margin: 0;
width: 100%;
}
My website's logo shows up normally in firefox and such, but in internet explorer the logo shows up behind the background image and it's really bad looking. Can someone tell me how to make the logo appear in frount of the background image?
Site like so you can take a look at the codeing: http://turquoisegrotto.com/
Get rid of all your wacky * selectors, add a strict DOCTYPE and try again. The logo isn't behind the background, it's offscreen somewhere.
EDIT: You have a DOCTYPE, get rid of the comment above it. DOCTYPE must be on the very first line.
You write some whacky CSS, what's with all the negative margins? I'd stay away from that stuff, not sure why your #navi had 120px height on it either, (and hence all the -margins).
Still, no reason for IE to put a logo behind the body's background-image! That was strange for sure.
Anyway these changes will bring the logo back into the magical world of the body:
body {
background-color: #CCFFFF;
color: #000000;
font-family: Tahoma;
text-align: center;
background-image:url("images/bg.png");
background-position: top left;
background-repeat: repeat-x;
/* changed */
margin-top: 0;
}
#navi{
width: 100%;
background-color: transparent;
text-align: left;
/* changed */
margin-top: 3px;
height: 20px;
}
#logo{
height: 120px;
background-color: transparent;
margin-bottom: 70px;
/* changed */
margin-top: 5px;
}
I'm sure your other elements will need adjusting since the logo and nav don't have big negative margins anymore.
Try setting the z-index (CSS Property) of the logo image to 10.