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">
Related
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.
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I want to implement a full page width mega menu inside a responsive "container" div.
Bootply example
I want to use a responsive container, but have the menu reach out to the edges of the window. I.e. it needs to expand outside of the parent element and not being limited by the container.
I've tried to use Yamm!3, but it seems to do the same thing as my example, which doesn't work. I know this whole thing kinda breaks the laws of CSS, but I was thinking that there might be some clever work around out there...
I found the answer. I needed to add position static to the dropdown and the next parent div. And then move down the dropdown-menu to make it appear below the menu.
Working example
you just add more style below:
.dropdown, .dropup{position:static}
I need to have a page with a responsive layout that has the following elements (see picture):
Legend:
"folds" for the menu means that it just becomes a small button, which unfolds the menu again on click);
When the left menu folds, the content and canvas div need to slide to the left side of the page. When it unfolds, they get pushed to the right again;
The bottom menu 2 is folded by default (you can only see a button). If you click it, then the small menu opens (above the other elements);
The content div is scrollable;
The elements both in content and canvas should be selectable;
Right now I have the following code:
<div id="background">
<div id="menu></div>
<div id="content"></div>
<div id="canvas"></div>
<div>
The position of background is "relative", the menu and canvas are set as "fixed".
The problem right now is that something (background div) is covering all the other elements, so I can't select the elements inside the content div and the canvas div.
I tried setting z-index correctly (lowest for the background, highest for the canvas) – didn't work.
I don't understand what the problem is.
Can somebody help me, please? Maybe you can just tell me from scratch how I should arrange those elements in CSS, so that I get the arrangement I need?
Thank you!
It seems that you have forgotten to set the position attribute for the content div? z-index only works on elements with fixed, absolute or relative position. (the default is static position, so the z-index is not working)
No idea why the other elements are covered. Maybe posting the css as well would help.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.