I've be trying to put together a website with the top of the page containing a navbar, image slider and testimonial quote (with the whole section taking up 100% of screen height. Then when the user scrolls down, the contact details are below.
I've split the container div (which is set to height: 100vh, width: 100vw;) into individual divs for each section (navbar, slider, testimonial) but the slider will not stay in its div. I want to make sure the slider is always fully visible with the testimonial below. For some reason the slider always hangs outside of the div (highlighted in red in my JSFiddle), and doesn't seem smoothly responsive (i.e. it pushes the text around). I'd really appreciate it if someone could point out where I'm going wrong:
https://jsfiddle.net/uy86dxd9/
Attempted solutions:
I've tried setting img { height:50vh; width: auto; } in the hope that that would remain the same size as its div, but that didn't work.
I've also tried clearing the float as I thought that might've collapsed, but no luck there.
Any questions, please ask :) Thanks in advance.
#Roope is correct. The red shape you had was outside because of the padding, but the problem was the nested container.
https://jsfiddle.net/uy86dxd9/2/
Just remove your sub-containers and just use rows and it goes away. There is still padding but Bootstrap removes this by using negative marings on the rows.
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
From the bootstrap docs (http://getbootstrap.com/css/):
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable.
Basically, you don't need a .container[-fluid] around each row. The main container is enough. After that just use rows.
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
Lets say I want to have a wrapper element which displays one element which is same width height, but on click it slides to the div next to it, which was offscreen before...
Let me draw this real quick:
Drawing level 9000
So clicking on the right arrow would slide /scroll to the offscreen element.
This is mainly for my modals, which look like this:
<section class="modal--wrapper">
<div class="modal">
/* picture i drew goes here */
</div>
</section>
modal--wrapper is fullscreen width / height 100%, position: fixed, while modal is centered, with max-width being 384px (for mobile purposes)
I know how to write logic for this, using getBoundingClientRect, I just don't know how to make the second element offscreen.
<section class="user">
<section class="user__account">/* ... */</section>
<section class="user__settings">/* ... */</section>
</section>
Where user account would be the stuff I drew, while user settings would be the element offscreen.
I tried setting the "user" class display: flex and overflow: hidden, but the two windows just appear one next to each other, both fully visible. Even if I set account and settings width to 384px (the width of the wrapper), they both appear one next to each other. flex-basis 100% on em doesn't work either. Dunno if position absolute would be helpful and I imagine it would require some hacking doing it like that. If thats the way to go I'm down. Just need a lil help where to start. I tried to position em like this but it just doesn't want to work :\
I used to build stuff like this but for elements that scroll up and down, not left and right...
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
I've done this a few times on websites, but this is one of the first times I've tried making a website with a width of 100%. I'm really enjoying the way the site looks compared to being in a wrapper with a set width, but now I'm having all kinds of basic layout issues.
I'm trying to make a layout that has a slide show at the top that is 100% width. Within the slideshow I have the website logo and nav bar positioned above the slider. I pulled this off by making the slideshow absolute and the nav bar and logo relative. So far no problem. Now I want to start adding content below the slider. When I try to add the next div which is going to be the <div id="menu">, the div launches to the top of the screen behind the slideshow. I've noticed this has to do with the slideshow being absolute positioned because when I remove it, the <div id="menu"> goes back to the bottom of the screen.
How do I add more content below the slider with a background-image all inside the <div id="menu">?
JS Fiddle
Not really clear what your issue is. Are you asking how to add a background image to the div? Why do you need the slideshow to be absolutely positioned? It is hard to tell how removing the absolute positioning messes things up based on your JS Fiddle.
On my wordpress built site, with a Responsive theme child theme, there is a div which contains widgets.
The widgets and their content are showing fine, but the "wrapping" div is not showing what I have styled via css. If I use firebug, I can see that the div is appearing up at the same spot as another div "featured", but is obviously behind it. Well, I need it to be below.
The site is http://thelawcompany.com.au.
The problem div is <div id="widgets" class="home-widgets">. I want the background and top-border that I have declared in CSS to appear behind the widgets. Also, there is a massive gap below the widgets that I can't seem to get rid of.
It because the #featured element is floated.
A solution is to float the widgets also by adding the class grid
Demo: Problem, Solution
<div id="widgets" class="home-widgets grid">