My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.
Related
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
I add a TOC to my HTML document and use the following CSS to style it. But I can't close the blue gap in the picture below? I don't find the right property.
image description
<style type="text/css">
.main-container {
max-width: 100%;
}
#TOC {
margin: 20px 0px 1px 0px;
}
#media (max-width: 1800px) {
#TOC {
width: 200px;
margin-left: -20px;
}
}
.toc-content {
padding-left: 1px;
padding-right: 1px;
}
div.main-container {
max-width: 100%;
}
div.tocify {
width: 50%;
max-width: 100px;
max-height: 85%;
}
#media (max-width: 1800px) {
div.tocify {
width: 100%;
max-width: none;
}
}
</style>
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.
I've got a full page width image under the nav bar which will then have the title heading placed over it.
The thing is I cannot seem to figure out how to always have it dead centre no matter the size of the page. At the moment when the page is fully open, the title is in the middle, however upon resize the text goes down.
Any ideas?
<div class="row">
<div id="header-image">
<img src="images/header2.jpg" alt="header" class="img-responsive">
<div class="row">
<div class="col">
<h2 class="text-center">About Us</h2>
</div>
</div>
</div><!-- end header image -->
</div><!-- end row -->
#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }
The use of Media Queries based on the screen size allows you to have different CSS depending on the resolution of the screen. The smaller you scroll the screen, it will then change it's CSS accordingly.
Media Query Tutorial : http://www.w3schools.com/css/css_rwd_mediaqueries.asp
The code below will change the font-size and the padding as the screen goes below the pixel requirements (500px and 200px). The padding was dropped to keep it under the image, and the font size was also lowered.
Solution 1
JS Fiddle : https://jsfiddle.net/Lq2zj48j/7/
#header-image {
width: 100%;
height: auto;
margin-top: 50px;
position: relative;
min-height: 200px;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
}
Solution 2
This solution has the chance of "squashing" the image. To avoid that, you could set the image in CSS (part of the background-image on your #header-image). From there you could set it to not repeat, centered and then use media queries to preserve the aspect ratio and "Zoom" in on the image on resize.
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
Js Fiddle : https://jsfiddle.net/Lq2zj48j/8/
#header-image {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: relative;;
width: 100%;
}
#media only screen and (max-width: 700px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 300px;
}
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 200px;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
#header-image {
height: 175px;
}
}
I'm currently trying to create a website with different media queries for different device sizes, the problem is, when I add a media query in the media-queries.css file for a different viewport the browser only reads one.
I recently added a media query for a maximum width of 1500 pixels, but now the media query for max-980px wont work.
Here's the css, anyone that can help me?
/************************************************************************************
smaller than 980
*************************************************************************************/
#media screen and (max-width: 980px) {
.slider-container {
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 300px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 20px solid #00e800;
height: 100%;
}
}
/************************************************************************************
smaller than 1500
*************************************************************************************/
#media screen and (max-width: 1500px) {
.slider-container {
width: 100%;
height: 400px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 400px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 15px solid #f3f70a;
height: 100%;
}
}
Add a min-width component to the larger max-width:
#media screen and (min-width:981px) and (max-width: 1500px) {
This should tell the system to segregate the two choices, as < 980 will also always be < 1500.