I'm using Bootstrap and I have a carousel under my navbar.
It works OK on normal computers, check this link.
However, I'm having trouble on smaller screens, e.g. iPhone. Just resize your browser screen to see what I mean.
I'm figuring maybe it isn't necessary the responsive CSS but something else I' doing wrong. Maybe their are better ways to get the carousel image with resized on every screen.
Also, I would like the carousel to have a 100% height of the screen, so the carousel spans the entire screen, and the rest of the content shows only when you scroll.
CSS I'm using:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-top: -80px;
position: fixed;
width: 100%;
}
.carousel .container {
position:relative;
z-index: 9;
}
.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;
z-index: 10;
}
.carousel .item {
min-height: 800px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: auto;
margin-top: -200px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption2 {
background-color: transparent;
position: static;
max-width: 380px;
padding: 200px 20px;
}
.carousel-caption h1,
.carousel-caption .lead,
.carousel-caption2 h1,
.carousel-caption2 .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn,
.carousel-caption2 .btn {
margin-top: 10px;
}
#wrapper-container {
margin-bottom: -80px;
padding-bottom: 80px;
position: relative;
background: inherit;
top: 60%;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
}
.carousel .item {
min-height: 500px;
}
.carousel img {
min-width: 100%;
height: auto;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
#media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.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;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
There's a lot you would need to do to clean it up... The following will get you started, but there would definitely be a bit more tweaking to do.
I didn't look at the CSS to fill the screen with an image as per your last request. I think you will have to look at adding a different carousel with other cropped images with a portrait aspect ratio if you want that, so you show the specific part of the image you want.
Firstly under #media (max-width: 767px), remove:
.navbar-inner {
margin: -20px;
}
It's causing your menu bar at the top to shift up out of sight.
From #media... .carousel, remove:
margin-left: -20px;
margin-right: -20px;
This is messy, and is there because of the padding added to body (see below).
Add the following to #media (max-width... .carousel:
position: relative;
margin-top: 0px;
Because you want the carousel to sit neatly under the navbar.
Remove the following from #media... body
padding-right: 20px;
padding-left: 20px;
This is causing problems for the carousel, and you can add this padding for specific divs like wrapper-container if you want.
From .carousel img, remove:
margin-top: -200px;
Next, you have to fix the fact that the text under the carousel is moved way down:
Add the following to #media... #wrapper-container
top: 0;
Remove the following from #media (max-width: 979px)
.carousel .item {
min-height: 500px;
}
and the following from #media (max-width: 767px)
.carousel img {
height: 300px;
}
because the carousel is nowhere near that height at smartphone sizes.
You will also have to play around with the positioning of the caption text in the #media CSS. You may want to decide to lose some caption text as the carousel shrinks.
This will get you started, and you can go from there...
For starters, get rid of the margin-top: -200px; on your .corousel img style.
With a small screen, your image height is less than 200px and this causes it to go off of the screen.
Related
Inside my three blocks, I have an svg image, but I have it like this:
.rating {
text-align: center;
background-color: var(--light-grayish-magenta);
color: var(--very-dark-magenta);
font-weight: 700;
border-radius: 7px;
max-width: 26em;
margin-left: auto;
margin-right: auto;
}
.rating::before {
content: '';
width: 5.625em;
height: 1em;
display: block;
background-image: url(images/icon-star.svg);
background-repeat: space;
}
And I have a #media query set.
#media screen and (min-width: 21.885em) /* breakpoint 350px phones ---> tablets */ {
.status {
max-width: 20em;
margin-left: auto;
margin-right: auto;
}
.rating {
padding: 0.9em;
}
.rating::before {
margin-right: 0;
margin-left: 0;
margin-bottom: 7px;
display: block;
max-width: 300px;
}
HTML CODE:
<div class="status flow-content">
<div class="rating">Rated 5 Stars in Reviews</div>
<div class="rating">Rated 5 Stars in Report Guru</div>
<div class="rating">Rated 5 Stars in BestTech</div>
</div>
Though when the screen shrinks so does the image and it sort of flips from side to side. I tried margins left, right, displays can't figure it out though.
Any advice?
I cannot seem to replicate the issue you are having with the code you provided. I did however manage to center align the stars and it was being more friendly that way. Try adding the following to '.rating::before' in your CSS elements.
margin: 0 auto;
I have a text in the header that I would like to center on smaller screens but I have tried various options and it's not working. Could someone point me in the right direction? Thanks in advance for your help.
Edit: added more code. If I add "width:70%" to .name, it aligns it to the center on some iphones but not others.
body {
margin: 0;
background-color: #e9e9f3;
}
/* Header */
.header .name {
position: absolute;
top: 0.5em;
left: 1em;
margin-left: 4%;
color: white;
font-size: 2em;
font-family: 'Archivo', sans-serif;
}
.social-icon-header {
position: absolute;
top: 3em;
right: 2em;
height: auto;
}
/* Tablets and under */
#media (max-width: 768px) {
* {
box-sizing: border-box;
}
body {
margin: 0;
text-align: center;
}
/* Header */
.social-icon-header {
display: none;
}
.name {
display: flex;
text-align: center !important;
justify-content: center !important;
width: 70%;
}
<div class="hero">
<!--Header-->
<div class="header">
<h2 class="name">Name</h2>
<a class="social-icon-header" href="https://www.tiktok.com" target="_blank">
<i class="fab fa-tiktok fa-2x"></i>
</a>
</div>
</div>
Try to add width: 100% to the name class, so it would take 100% width of the parent container.
.name {
text-align: center !important;
justify-content: center !important;
width: 100%;
}
You have to change the positioning of .name in the media query and set text-align: center for .header. In this way you can change the whole layout for screens with a different size (like in your example a maximum of 768px).
Just make sure that you reset other values that you set before (outside the media query, like top, left and margin-left for .name) that you don't need for other screen sizes. You also forgot to close media query tag.
Also beware of the fact that it's good practice to design css mobile first and then use media queries for bigger screens. https://www.browserstack.com/guide/how-to-implement-mobile-first-design
If you replace you css with the following it'll work:
body {
margin: 0;
background-color: #e9e9f3;
}
/* Header */
.header .name {
position: absolute;
top: 0.5em;
left: 1em;
margin-left: 4%;
color: white;
font-size: 2em;
font-family: 'Archivo', sans-serif;
}
.social-icon-header {
position: absolute;
top: 3em;
right: 2em;
height: auto;
}
/* Tablets and under */
#media (max-width: 768px) {
.social-icon-header {
display: none;
}
.header {
text-align: center;
}
.header .name {
position: relative;
left: auto;
top: auto;
margin: 0;
}
}
I have some circle divs (using large border-radius) and they're different sizes on different screen sizes using media queries. However the width doesn't kick in correctly on some media query sizes. For example here is a screenshot of it is extra small devices:
The images shows that the width and height are set to 80px in css however the computed width is 63px.
When I drag the screen wider, I am seeing the circles gradually become wider and wider until they are circles, kind of like a "responsive" div, rather than a div that only changes size at certain width breakpoints.
Here is a jsfiddle:
http://jsfiddle.net/52VtD/15513/
How can I get the circle divs to always be circles (same width as height)?
html:
css:
#about-page {
height: 100%;
padding-top: 57px;
width: 100%;
overflow-y: auto;
overflow-x: auto;
min-height: 480px;
justify-content: center;
color: black;
background-color: white;
}
#content-container {
h1, h2, h3, h4, h5, h6 {
text-align: center;
text-transform: uppercase;
font-weight: 200;
}
}
.circle-container {
display: inline-flex;
margin-bottom: 40px;
width: 100%;
justify-content: center;
}
.circle {
border-radius: 75px;
border: 1px solid black;
display: inline-flex;
}
/* xs */
#media only screen and (min-width: 320px) {
.circle {
height: 80px;
width: 80px;
margin: 5px;
}
}
/* s */
#media only screen and (min-width: 544px) {
.circle {
height: 110px;
width: 110px;
margin: 5px;
}
}
/* m */
#media only screen and (min-width: 768px) {
.circle {
height: 120px;
width: 120px;
margin: 8px;
}
}
/* L */
#media(min-width:992px) {
.circle {
height: 130px;
width: 130px;
margin: 10px;
}
}
/* xl */
#media only screen and (min-width: 1200px) {
.circle {
height: 150px;
width: 150px;
margin: 10px;
}
}
You're using flexbox (specifically inline-flex) so by default, the circles will shrink to fit the container element. To prevent this, set flex-shrink: 0 or flex: 0 0 auto; to prevent this behaviour.
.circle {
border-radius: 75px;
border: 1px solid black;
display: inline-flex;
flex: 0 0 auto;
}
http://jsfiddle.net/52VtD/15520/
I am creating a responsive header. I got two columns and want the button in the right column to be vertical centered.
I know I can center items using top: 50%; margin-top: -xy px, and my button although got a fixed height: 40px.
To use this method I wrapped my button inside a div {position: relative}. This does not work, as the div does not stretch its own height.
How can I solve this with css? First I thought about Flexbox, but it has quite some lack of browser compatibility.
JSFIDDLE DEMO
You can greatly simplify your code - remove floats, (use display: inline-block instead), remove the .relative div, etc.
Working Fiddle
html, body {
margin: 0;
padding: 0;
font-size: 16px;
}
header {
background: red;
color: #fff;
padding: 0.5em;
}
header h1 {
font-size: 2em;
margin: 0 0 0.2em;
}
header p {
margin: 0;
}
header button {
height: 40px;
width: 70px;
}
.column-left {
display:inline-block;
width: 70%;
vertical-align: middle;
}
.column-right {
width: 29%;
text-align: right;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* responsive */
#media (min-width: 200px) {
header {
padding: 1em;
}
}
#media (min-width: 300px) {
header {
padding: 1.5em;
}
}
#media (min-width: 400px) {
header {
padding: 2em;
}
}
#media (min-width: 500px) {
header {
padding: 2.5em;
}
}
#media (min-width: 600px) {
header {
padding: 3em;
}
}
/* helpers */
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
Remove this div with position: relative and add position: relative to your header tag. You can even delete your column-right div.
Another solution:
header button {
top: 50%;
transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}
JSFIDDLE
I've been playing with the CSS of my site and have now noticed that when you scroll down or up on this page: http://famigami.com/Testsite/?p=1 the whole page bounces or shakes.
Essentially, the site is made up of four large sections: Header, Image, Content and Footer. All sections are fixed position except for the content, which scrolls.
Can someone help me pin down why the site (all areas with position: fixed) bounces?
The main CSS file can be downloaded here: http://famigami.com/Testsite/wp-content/themes/customizr/inc/assets/css/blue.min.css
(The above file doesn't format correctly here and is way too long to manually fix)
The following is my child theme CSS file:
.navbar-inner .social-block {
float: right;
}
.navbar-wrapper .navbar h2 {
text-align: right;
float: left;
}
div.brand.span3 {
position: absolute;
}
div.navbar-wrapper.clearfix.span9 {
float: right;
}
.carousel-caption {
background: rgba(0,0,0,.7);
max-width: 40%; /* was 60% */
margin-left: 2%; /* was 11% */
padding: 1%; /* was 5% */
position: absolute;
left: 17%;
bottom:0px; /* hugs the bottom of the slider */
}
/* shrink the Title field */
.carousel-caption h1 {
font-size: 24px; /* was inherited from h1 (38.5px) */
line-height: 1; /*was 1.25 */
}
/* shrink the description field */
.carousel-caption .lead {
font-size: 16px; /* was inherited from lead (21 px) */
line-height: 1; /* was 1.25 */
}
.carousel {
width: 42%;
float: left;
position: fixed;
top: 125px;
}
.carousel .item {
height: 699px;
}
#main-wrapper {
width: 57%;
margin:0;
padding: 5px 0 10px 5px;
overflow: auto;
height: 100%;
float: right;
top: 125px;
position: relative;
}
.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
width: auto;
}
#footer {
bottom:0;
width:100%;
float: left;
position: fixed;
z-index: 100;
}
body {
min-height:100%;
position:relative;
}
footer#footer .colophon .social-block a {
float: left;
}
.row {
margin-left: auto;
}
.tc-header {
position: fixed;
}
.carousel-caption {
max-width: 100%;
margin-left: 0;
padding: 1%;
left: 0;
}
#content.span9 {
width: 695px !important;
}
For those with wordpress, you can run Customizr theme at default and paste my child theme's CSS. Just be sure to disable Featured Pages (Customize -> Front Page -> Featured Pages Options) and enable the right sidebar (Customize -> Pages & Posts Layout -> global default layout).