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).
Related
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 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
The slider on my website King Adler Ecommerce Website is coming out of the wrapper on zooming in the browser. I tested it on Google chrome, Mozilla and IE, it is the same everywhere. I think I will have to bring in a small change somewhere in the floating properties of the wrapper or the slider. But, I have no idea how to accomplish this. Please help me fix this with the least possible efforts.
/* LAYOUT */
.primary-define .wrapper {
width: 950px; /*changed by yuvi 1160*/ /*second change - 1060*/
margin: 0 auto; /*0 10px*/
/*position: relative; added by yuvi*/
}
.primary-define #column-left {
float: left;
width: 240px;
}
.primary-define #column-right {
float: right;
width: 240px;
}
.primary-define #column-left + #content,
.primary-define #column-right + #content {
float: right;
width: 650px; /*editing by yuvi*/
}
.primary-define #column-left + #content {
margin-left: 60px;
}
.primary-define #column-right + #content {
margin-right: 60px;
}
.primary-define #column-left + #column-right + #content {
width: 520px;
}
.primary-define #content form {
margin: 0;
}
/* CONTAINER */
.primary-define #container {
z-index: 1;
padding-top: 30px;
position: relative;
background-color: #fff;
border-bottom: 1px solid transparent;
}
problem is not in slider but in whole layout if you set background in % then set container in %
.primary-define .wrapper {
width: 80%; /*changed by yuvi 1160*/ /*second change - 1060*/
margin: 0 auto; /*0 10px*/
/*position: relative; added by yuvi*/
}
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.
This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me - I do not want to specify a fixed height and width for the content.
http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem - resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.
Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.
Here is the CSS:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #eee;
}
.content {
background-color: #ddd;
padding: 0em 0em 2em; /* bottom padding for footer */
overflow: auto;
}
#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}
#status {
border: solid 1px #000000;
}
#status .error {
color: red;
font-weight: bold;
}
/* ------------------------------------------------------------------------------------*/
.char {
display: inline-block;
vertical-align: top;
}
.line {
white-space: nowrap;
}
/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
border: 2px groove threedface;
margin-top: 1em;
}
.fakeFieldset {
padding: 2px;
}
.fieldset > div.legend:first-child {
display: inline-block;
text-align: left;
margin-left: 10px;
background: #ddd;
position: relative;
top: -0.7em;
}
.merge-bottom {
margin-bottom: -2px;
}
/* ------------------------------------ Forms ------------------------------*/
form div {
white-space: nowrap;
}
form select, form input {
margin: 2px;
border: 1px groove;
}
form label:not(.same-line) {
width: 8em;
text-align: right;
display: inline-block
}
#cust-balance {
text-align: center;
}
.ccExpDate {
width: 2em;
}
#cust-salutation {
width: 4em;
}
.postalCode {
width: 7em;
}
#cust-ccAddress {
width: 20em;
}
// Updated with input from asker.
This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.
You need to give the header and the footer position:fixed
I also put some padding in the .content div to make room for the top header.
Like the following:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.content {
background-color: #ddd;
padding: 2em 0em; /* padding for footer and header */
}
.menubar {
position: fixed;
top: 0px;
width: 100%;
z-index:1;
}
#footer {
position: fixed;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}