I'm designing this site: http://ecostructionny.com. I'm just at the point where I'm laying out the home page and I'm a bit stuck. I want a footer row at the bottom that lists contact info, and then directly above it is a row of 3 blurbs of information. The background images are the main visual feature of the page, so I'm trying to leave space for them to show through.
Can anyone help with some suggestions? If there's a better way to lay it out, I'd love some other advice.
Thanks!
There is a good footer tutorial at
http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
The demo page is here:
http://www.lwis.net/profile/CSS/sticky-footer.html
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
The footer is then given the following rules:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
Of course you know you will get as many ideas as people that respond. Everyone's opinion is different when it comes to design. Based on your statement above I would direct you to the bootstrap sticky-footer example that comes with the download of bootstrap. In addition, in my experience, it works better if you do some work and resize the photos so they appear natural in the carousel. When images are stretched to fit it distorts things a bit. Take some time and experiment. Also, I have found that using the hero template page with bootstrap works really well for the thing you are trying to do. Experiment around.!!
Tony Tambe: bootstrap has all the responsive code yes, but you will have to add some #media queries to your styling to make the header resize and the underline under the title move down etc. You can add #media query in the html page using a style element (In the head section). Keep experimenting, is looking good.
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
I am building a website using Divi, and for a couple of the pages there is a requirement to have a sticky menu, along with a top title section combined as though they were one. Ideally I would like them to remain in their current position and simply scroll with the page without knocking out the formatting.
Code used so far is as follows:
.stickyheader{
position: sticky;
position: -webkit-sticky;
top: 55px;
}
#page-container{
overflow: visible !important;
}
I have tried naming both the title section and menu section with the class name 'stickyheader' in the hope that both would be lumped together. This does appear to make both elements scroll with the page, but the formatting goes out the window and they start overlapping and squashing up at the top of the screen, plus the space at the top of the title section has increased which throws the formatting out for the whole page, as everything has been adjusted to fit over the background image.
Both sections are global, for ease across all other pages as these two elements appear the same on each one.
Does anybody have any suggestions? Is there an easier way to do this?
Thanks in advance!
Sure thing, you can do that easily, making sure that you are using the latest Divi version which has the Theme Builder. With it, you can design a template which can govern a specific page and you can assign a fixed position to any element:
No need to use CSS. You can also take other approach:
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-fixed-header-with-divis-position-options
https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/
https://www.divithemeexamples.com/make-your-divi-4-0-header-sticky-or-fixed-with-the-theme-builder/
Already a long time ago I started with a new homepage project. I've learnt to build up a homepage on my own, so I'm still in the learning process. Therefore, it might be possible, that I've chosen sometimes not the best way to implement something.
I'd like to have a full width header (and footer) on my webpage. For this reason I created some div tags like this one below:
.header_container_overall-1 {
height: 90px;
width: 1000px;
padding-left: 1000px;
margin-left: -1000px;
padding-right: 1000px;
background-color: #f1f1f1;
}
The problem now is, that a browser (or a mobile device) shows a horizontal scroll bar. I read in a post, that I could use "overflow-x: hidden;". I applied this snippet of code into the "body" class of my css-file. The horizontal scroll bar disappeared, but you can still scroll to the right using the arrow keys on your keyboard.
Unfortunately, I kept programming my website knowing this bug (I thought, that I will fix this later, but I think, this was not the best idea). However, I now came back to this bug and tried to fix it. I found several threads, in which the same problem occured:
kennykee.com/118/div-100-width-without-horizontal-scroll-bar/
stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key
Then, I tried the following steps:
adding the "overflow-x: hidden;" to several classes (especially the header and footer classes) with the aim to prevent horizontal scrolling. I tried several options and in the end, I got a website, where the header and footer got clipped at the body (for example I got a width of 1000px instead of a full width).
when I tried to use "position: relative;" or "position: fixed;" in different classes, I ended up, that the main page (which is now centered because of margin-left and margin-right set to "auto") was set to the left.
I hope, you understand what I mean. It's hard to describe, even more with my bad English ;-). And as you can see, I sometimes tried stuff without even knowing, what I'm doing. It was more and more "try and error" and I came now to the desicion, that I'm at the end of my html and css knowledge to fix this problem. Maybe you can see the problem right now or maybe you have an idea, what I could try to do.
The website with the described error is available on:
http://www.airlink.ch
The css file is available too:
http://www.airlink.ch/stylesheets/layout.css
If you need any further information, please let me know. And sorry for this long explanation.
Best regards
I did not read the post much further than your CSS. I am sorry but you should not be using hacks like padding 1000 PX and margin 1000px. If you want a full width div, set the HTML and body elements to width: 100%. Then add width 100% to your header/footer div. Make sure to add the meta viewport tag for width = device width. You should do a quick google for some resources regarding device width and responsive design in general.
Hope you can get what you want working!
I’m trying to create layout using zurb foundation.
Currently, I’ve got very basic one, but one feature blocks me on that very beginning.
I’d like to make my <main> section to take at least 100% - header height - footer height, so <footer> would be on the bottom of the screen (or, if there is too much content, then you’d have to scroll down to see footer)
I created (as I said before, very basic version) here: http://jsfiddle.net/42VcD/2/
I’m not sure if it’s possible without JS, but I’d much more prefer CSS based solution.
Here is a sample for what you are looking, however its not done in foundation.
http://codepen.io/tusharbandal/full/lmrgD
Its done using position: absolute to footer.
Importantly you done need js for that.
Even if content increases the footer move down.
you can specify the height for the main section to your requirement.
here is a fiddle with a class(main) for section 100%.link
.main{
height:100%;
}
I am still in the learning process and newbie at Stackoverflow. Sorry about any stupid behavior from my side.
I have a WordPress theme, and it's already responsive . I made a page, where I made 3 boxes (with inline CSS to make their background colorful, and one box floats on right, whereas other 2 float on left).
Please check that page and the 2nd box here : About Us
Now, when I check site from mobile, I see that the 2nd box floats on right and goes out of screen. I am not much aware of how division hierarchy work in CSS, so I tried few things in media queries, but I couldn't succeed. I gave that 2nd block <div id="image2" style=".....;float:right;">
and now in media query, I want it to be float:none;
Can anyone point me to how to do this? What is correct hierarchy that I have to put inside media query (which is there in a theme file).
I managed to change few things with the logo via media query, and I got the idea that I had to write
.header-wrapper .logo-wrapper {.....}
I just don't know how to do the exact same thing with this block of text.
Help is appreciated.
Thank you!
your image2 has a fixed width on both mobile and desktop
#media (max-width:767px){
/* try this */
#image2{
width: 100%;
}
}
My advice to you: AVOID INLINE STYLING...