#media only screen and (max-width:767px) {
body { background: none; padding-bottom: 0px; }
.postcode_wrap { height: auto; background: url(../images/index_page_bg_2.jpg) left top repeat-y !important; background-size: 100% 100% !important; padding-bottom: 0%; }
.post-code-right-block, .post-code-left-block { height: auto !important; }
.bistro_logo { padding-top: 40px !important; }
.bistro_logo img { max-width: 100%; }
.postcodeform { top: 10% !important; width: 100%; }
.postcodeform input.pcinput { padding: 0; margin: 0; font-size: 1em !important; }
.post-code-right-block img { max-width: 100%; }
.postcode-right-block-content, .postcode-left-block-content { padding-top: 20px; }
.post-code-app-icons-wrapper > .first img { height: 60px; width: 125px; float: right; }
.post-code-app-icons-wrapper > .second img { height: 35px; width: 125px; float: right; }
#wh-widget-send-button.wh-widget-left { left: 10px !important; bottom: -10px !important; }
.appBtnRow { margin: 28px 15px 0px; text-align: center; }
.resim { width: 332px !important; }
this causes the bottom white area problem. How can I fix this?
bottom white problem
You have to either make sure that your image is the right dimension for the device format you are targeting and render the right image in function of the device format.
OR
You can allow the image to stretch (not advised) to fit all format
Or
You will have to choose where the image is going to be centered when resizing while keep it's ratio, if your image is 1920*1080 then on mobile format you will only see half of it or so, this is where you have to choose which part of the image you want to show.
body, html {
height: 100%;
margin: 0;
}
.postcode-rightblock img {
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
Related
My footer background image is not showing. I cant figure out why.
Any help would be greatly appreciated. Thank you.
/* Footer */
}
.footer {
height: 400px;
width: 100%;
background: url(/images/space.jpg);
background-size: cover;
}
.footer .container {
position: relative;
top: 200px;
}
.footer p {
color: #fff;
font-size: 15px;
margin: 0px 0 20px 0px;
padding: 50px 0 0;
}
I have a drupal 7 views slide show with a caption on the bottom. The slideshow images are responsive when browser window is resized but the caption overflows on to the content area or moves up into the image. After a refresh it all works perfectly at the new window size.
Is there some css that can be applied to the caption which will keep it aligned to the image on resizing the browser.
/*----------------------- Slideshow ------------------*/
.l-region--slideshow {
margin-top: 1em;
margin-bottom: 2em;
}
.views_slideshow_cycle_main_front_page_slideshow-block {
position: relative;
}
.views-field-field-slide-caption .caption-enhance {
position: absolute;
width: 100%;
height: auto;
// left: 0px;
bottom: 0px;
background-color: #015697;
color: #fff;
padding: 5px 10px 5px 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,1);
moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
/* Make slideshow img responsive */
.views_slideshow_cycle_main {
width: 100%;
float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
width: 100% !important;
height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
width: 100% !important;
height: auto;
}
.views_slideshow_cycle_main .field-content {
max-width: 100%;
width: 100%;
}
.views_slideshow_cycle_main .field-content img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#views_slideshow_cycle_main_front_page_slideshow-block {
padding-bottom: 1em;
border-bottom: double #ddd;
}
/*Make Caption Font Size Smaller for mobile ---------------------------*/
#media all and (max-width: 440px) {
.views-field-field-slide-caption .caption-enhance {
font-size: 75%;
line-height: 1em;
}
}
In the end I just used FlexSlider Views Slideshow module instead of just a views slideshow and it all worked out responsively.
Now, when i make the window of my codepen narrower, the block with quote responsively goes down, covering both buttons.
I would like it to go up so it doesn't approach the buttons.
Here's the codepen: http://codepen.io/RycerzPegaza/pen/NGpEGp?editors=010
Here's the CSS:
#import url(https://fonts.googleapis.com/css?family=Lato:700|Amatic+SC:700&subset=latin,latin-ext);
body{
background: url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed;
background-size: cover;
}
.row-fluid {
position: relative;
top: 200px;
}
p {
font-family: 'Amatic SC';
color: #DDDDDD;
font-size: 250%;
padding: 10px;
}
#qouteblock {
position: relative;
margin-bottom: ;
}
#background{
position: relative;
top: 170px;
background-color:rgba(0,0,0,0.6);
}
.container {
padding: 10px;
}
nav {
position: fixed;
bottom: 5%;
left: 46%;
font-family: 'Lato';
font-size: 18px !important;
}
iframe {
position: fixed;
bottom: 2%;
left: 46%;
}
Use media queries for reduce font-size propierty of .content:
#media (max-width: 650px) {
p {
font-size: 30px
}
}
This css below works with a workaround of taking the margin at -22px in the body. I was wondering if there might be a better way to do this. I have a full width background image and I want the nav bar to be the same.
html {
background: repeating-linear-gradient(transparent 0%,transparent 90%,#000000 100% ),
url("../../Images/bg2.jpg") center center no-repeat;
background-size: 100%;
height: 135%;
}
body{
margin: -22px auto;
padding: 0 auto;
}
nav{
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: white;
}
CSS
jsFiddle
html {
background-image: url(http://placehold.it/1800x900);
background-size: cover;
}
body{
margin: 0; /* override the default 10px margin */
}
nav{
width: 100%;
float: left;
background-color: white;
}
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%