I sit with a little teasing at the Responsive design on my page...
In a PC browser all is as it should ..
But on other mobile devices, the boxes not really fit ...
The site is www.iværksætterpodcast.dk
here can you see the problem from an iphone 5 browser.
http://mobiletest.me/iphone_5_emulator/ # u = http://iværksætterpodcast.dk
So if you click load the page from a mobile browser and brows through the menu, you'll see the page doesn't fit.
I tried to chance this:
page_content {
width: 824px;
opacity: 0.8;
overflow: hidden;
margin: 50px auto 120px;
padding: 5px 0 30px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
but that doesn't help.
I think its something with: media queries maybe?
Well if you some kind can install a plugin with a responsive menu which will fix my other issue, that would be fine aswell.
Hope you can help ...
How would something like this do for you. You can expand the window to see it is responsive.
.wrap {
max-width:960px;
margin:0 auto;
}
.page-content {
width: 92%;
float:left;
opacity: 0.8;
overflow: hidden;
margin:10px 2%;
padding:20px 2%;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
Check it out on fiddle
Related
Im trying to create a stick nav. However on doing so, the nav goes into the background.
I've set the position on the nav div like so,
.site-header {
...
position: fixed;
}
However, this has worked as expected, as mentioned above. Is there anything else I should be adding, to ensure the div is ontop and fixed.
https://jsfiddle.net/fe6jc8nu/
Thanks,
Add z:index: 9; to .site-header rule:
.site-header {
background-color: #fff;
padding-bottom: 25px;
padding-top: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
z-index: 9;
}
How is this styling achieved using html and css? It looks like three divs, however when inspected through the console, it appears that ::before might be being used.
Also does anyone know what this kind of style might be called so I can update the title of this question to be more specific?
I took this image and example from here http://todomvc.com/examples/react/#/
Looking into code, it's pretty simple to find how they achieved this effect. Stacked box-shadows.
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
But surely there are more ways of doing this, depending on your needs.
I have multiple sections placed one after another, each of them should drop shadow on the next one. Number of sections might change
My current idea is to create about 10 css rules like
section {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
section:nth-child(1){
z-index:10
}
section:nth-child(2) {
z-index:9
}
...
This approach has obvious flaw, so my question is - is there more elegant way to achieve this using only html/css?
Set z-index automatically somehow or make shadows in completely different way?
It's actually possible without using JavaScript or a pseudo-element.
Just using the transform-style: preserve-3d property and a specific rotation.
.section {
height: 32px;
width: 100%;
background: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotateX(1deg);
}
.wrapper {
transform: rotateX(-1deg);
transform-style: preserve-3d;
}
<div class="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
It's impossible to do it via html/css. But you can use javascript:
for (var i=$("section").length; i > 1; i++){
$("section:nth-child(" + i +")").css ({"z-index":i});
}
And css:
section {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
I have two div likes ,
<div class="imageDiv"></div>
<div class="imageDiv"></div>
and css class ,
.imageDiv
{
margin-left: 100px;
background: #fff;
display: block;
width: 345px;
height: 220px;
padding: 10px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
You can see the result Here :)
I want to overlap this two div likes ,
add to second div bottomDiv
and add this to css.
.bottomDiv{
position:relative;
bottom:150px;
left:150px;
}
http://jsfiddle.net/aw8RD/1/
See demo here
you need to introduce an additiona calss for second div
.overlap{
top: -30px;
position: relative;
left: 30px;
}
I edited you fiddle
you just need to add z-index to the front element and position it accordingly.
check this fiddle , and if you want to move the overlapped div you set its position to absolute then change it's top and left values
Why don't you use just one div and then use pseudo element :: before or ::after and set position of that pseudo element to absolute then set top: 100px and left 100px
I have been working with HTML and CSS for about 5 years now, and I am at a complete loss with this one. http://napletonlaw.connectionsquad.com/
On that page, there is a single div in that container with an ID of Clarity.
I have the CSS rules as follows:
#clarity {
text-align: center;
width: 320px;
}
The code for it is as follows:
<div id="clarity">
<img src="Resources/magnifying-glass.png" />
<p>You have questions, and we have answers. We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
</div>
For some reason the width I apply to that DIV is not taking... In dreamweaver's preview it shrinks the div to 320px, but when previewed it does not.. I do not know why the clarity div is spanning the entire page when I set a width of 320px...
There is a missing bracket in the preceeding rule that is likely the cause of your issue.
#container {
width: 960px;
height: 800px;
margin: 0px;
position: relative;
z-index: 100;
background-color: #a0a0a0;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1; <--- Missing bracket
-moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
#clarity {
text-align: center;
width: 320px;
}
<div id="clarity">
<img src="Resources/magnifying-glass.png" />
<p>You have questions, and we have answers. We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
</div>
#container {
width: 960px;
height: 800px;
margin: 0px;
position: relative;
z-index: 100;
background-color: #a0a0a0;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1; <--- Missing bracket
-moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
#clarity {
text-align: center;
width: 320px;
}
There is a CSS error, a missing bracket, at style -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1;
#container {
width: 960px;
height: 800px;
margin: 0px;
position: relative;
z-index: 100;
background-color: #a0a0a0;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1); //Added a missing bracket here.
-moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
<div id="clarity">
<img src="Resources/magnifying-glass.png" />
<p>You have questions, and we have answers. We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
</div>