I have a problem on responsive view. How to make the left and right arrow as responsive. Below attach screenshot for responsive devices
Website view
Mobile View
.carousel-control span {
position: absolute;
top: 85%;
color: #C21B17;
z-index:999px;
font-size:30px;
}
.carousel-control.left {
margin-left: -40px;
width:30px;
height:60px;
background:none;
}
.carousel-control.right {
margin-right: -20px;
width:30px;
height:60px;
background:none;
}
you can just set the carousel controls to auto on width and height or use percentages to make sure it fills a certain amount of the page. For example let's say you want the controls to take up 20% of the page each and height doesn't matter too much. Then do the following.
.carousel-control.left {
margin-left: -40px;
width:20%;
height: auto;
background:none;
}
.carousel-control.right {
margin-right: -20px;
width:20%;
height: auto;
background:none;
}
Related
I have been trying to fix the length of this div for awhile, and I'm sure it is something completely simple, just not seeing it. The div for the content "page" is extending well beyond the footer and I can manipulate the length with the min-height property in css however I want to make sure that the footer/"page" div extend to bottom regardless of the content so I don't want to set a definite length for the div.
EDIT:
jsfiddle: http://jsfiddle.net/F2SMX/
Footer cs
#footer {
background: #365F91;
color: #000000;
width:100%;
height: 35px;
position:relative;
bottom:0px;
clear:both;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
color: #FFFFFF;
}
#footer a:hover {
text-decoration: none;
}
changing footer position from relative to absolute had no change
Change relative to absolute, and remove min-height from #page.
#footer { position: absolute; }
You'll also need to make sure that you only have 1 #page per page.
Working fiddle.
Go old school.....add this to you css of #footer
bottom: -500px;
padding-bottom: -500px;
working demo
CSS
#footer {
background: #365F91;
color: #000000;
width:100%;
height: 80px;
position:relative;
bottom: -500px; /* push to the bottom */
padding-bottom: -500px; /* maintain equilibrium by giving footer its height!!*/
}
EDIT
to make footer stretch to height, if content exceeds
demo
#footer {
background: #365F91;
color: #000000;
width:100%;
min-height: 80px; /*change height to min-height, this will always cover the content height*/
position:relative;
bottom: -500px;
padding-bottom: -500px;
}
If you want a scrollable footer if content exceeds
demo
#footer {
background: #365F91;
color: #000000;
width:100%;
height: 80px; /*keep height fixed*/
overflow-y:scroll; /*scroll when content size increases */
position:relative;
bottom: -500px;
padding-bottom: -500px;
}
You want to use something called sticky footer.
http://css-tricks.com/snippets/css/sticky-footer/
Or you can use my solution without using pseudo class :after
EDIT: sorry here you have my solution to problem with div instead of after http://codepen.io/anon/pen/LsFIn
i'm having a problem and i can't find a solution that fits, i'm have two divs and the second one moves out to below of the 1º one when i resize below 800px (1ºdiv width + 2ºdiv width). What i want it's to fix the elements (not position 'fixed'), but i want them side to side no matter what, like in the facebook page or google, when i resize they stay in same place even if they go 'outside' the window. http://jsfiddle.net/VLt9m/. Thanks in advance.
#wrapper {
padding:92px 0 0 0;
width:100%;
float:left;
}
#content a {
text-decoration: none;
}
#block1{
background-color: #FFC374;
width:400px;
height:400px;
margin:0;
float: left;
position: relative;
}
#b1Title{
width:400px;
height:100px;
margin:0;
background-color: #FFD190;
opacity: 0.8;
position: absolute;
}
#b1Title h1{
color: #222;
font-size: 200%;
margin: 8% 0 0 12%;
}
#block2{
background-color:#449DCC;
width:400px;
height:400px;
margin:0;
float: left;
position: relative;
}
#b2Title{
width:400px;
height:100px;
margin:0;
background-color:#80B7D7;
opacity: 0.8;
position: absolute;
}
#b2Title h1{
color: #222;
font-size: 200%;
margin: 8% 0 0 12%;
}
If you wish, you can do it with media query. But, here is a quick fix with max-width
Working Demo
Add this to block
max-width:400px;
width:50%;
And this to title
max-width:400px;
width:100%;
Update
Give fixed width to wrapper
Working Demo
#wrapper {
padding:92px 0 0 0;
width:800px;
float:left;
}
If my guess is right, then you need to give min-width:800px; to Wrapper.
#wrapper{
padding:92px 0 0 0;
min-width:800px;
float:left;
overflow:auto;}
See here
I have turned to this guide to solve my problem of vertically centering my text within the div. And I believe to understand what it says, but it still doesn't work.
.number {
position: relative;
height:50px;
margin: -25px 0 0 0;
top: 50%;
background-color: #00ff00;
}
Here is the fiddle, which recreates the problem. I want the green area (.number) to be centered vertically within the button (.numberElement)
Where is my problem? I reckon jQuery Mobile is complicating things and creating structures I am not foreseeing...
Thank you!
Sandro
You need to make some changes to your css like so:
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
display:table;
}
.numberElement .ui-btn-inner {
display:table-cell;
vertical-align:middle;
}
Working Demo
Your top property of .number is not working fine, as i can see in your fiddle. Try changing it from top to margin-top. It will center around margin-top:60px;
Also dont forget to remove the line in .number
margin: -25px 0 0 0;
here is the correct answer as i think
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
}
.number {
position: relative;
height:50px;
margin: 50px 0;
line-height:50px;
top: 50%;
background-color: #00ff00;
}
#grid {
position:absolute;
padding:0px;
margin:0px;
border:solid 1px #ff0000;
height:400px;
width:400px;
}
I have unordered list of thumbnail images to display horizontally across bottom of page. I want a few of the images to be visible while the others are scrolled horizontally in/out upon scrollbar use.
However I can't get my images to line up in one continuous line - they break up at the 100% width mark.
This may be an issue with my css rather than with jscrollpane.
Demonstration here: http://www.air.desensdesigns.com/temp.html
CSS:
#thumbnails{
position:fixed;
top:86%;
left:0px;
height:125px;
width:100%;
background:rgba(0,0,0,.6);
}
#thumbnails ul{
position:relative;
top:5px;
}
#thumbnails li{
list-style:none;
float:left;
margin:5px;
padding:0px;
height:100px;
width:133px;
border:2px solid #333;
}
JS:
$(function() {
$thumbnails.jScrollPane({});
});
Add a width to ul:
#thumbnails ul {
position: relative;
top: 5px;
width: 5000px;
}
UPDATE
Try add this:
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 52px;
background: red;
}
My Test:
I am trying to keep an image attached to the bottom-left of my page, but unlike How to keep background image on bottom left even scrolling, I do not want the image to follow the user as they scroll.
I have a feeling it has something to do with making #wrap fill up the entire window, but I can't seem to figure out how.
I am using normalize, with this code appended to the style sheet:
body {
background-image:url('/img/graph-paper3.png');
background-repeat:repeat;
}
#container {
width:960px;
margin:0 auto;
}
#sidebar {
float:left;
width:310px;
padding:10px;
}
#main {
float:right;
width:610px;
padding:0 10px 10px 10px;
margin-top: 40px;
background-image:url('/img/top.png');
background-repeat:no-repeat;
background-position:top center;
}
#paper {
margin:40px 0 147px 0;
padding:20px;
background-color:#ffffff;
min-height:400px;
}
#footer {
clear:both;
padding:5px 10px;
}
#footer p {
margin:0;
}
#wrap {
background-image:url('/img/jeremy-david.png');
background-repeat:no-repeat;
background-position:left bottom;
}
You can see the code in action here: http://www.jeremydavid.com.
How about:
.bottom-image{
position: absolute;
bottom: 0px;
left: 0px;
}
This will position the image absolutely to the page. (Make sure it isn't a child of another absolute or relative or fixed positioned element).
Use
.bottom-image {
max-width: //some %
z-index: -100;
position: fixed;
bottom: 0px;
left: 0px;
}
You can also use
#wrap{ //your main #wrap container
background: url('/img/jeremy-david.png') no-repeat bottom left;
}