I wanted to left sidebar and margin line stay in place while someone scrolls down the site . But the sidebar keeps changing it's position here with screen resizing. Any fixes?
#media only screen and (max-width: 550px) {
.side-bar-icon {
display: none;
}
.side-line {
position: relative;
max-width: 36rem;
border-right: none; !important;
border-bottom: thick solid #ef4a60;
padding-bottom: 30px;
margin-bottom: 50px;
}
Reference code here
#media (min-width: 550px)
.eight.columns {
width: 65.3333333333%;
/* margin-left: 45%; comment this out*/
}
.side-bar {
position: relative;/* change fixed to relative */
top: 1;
left: 1;
}
Just an add on, using !important is very bad practice until and unless very-very important. Just an advice!
Related
I got problem with 2 elements from my header since 3 days,and cannot fix it.The problem is there that my "Search-trigger" which is my search icon and "tablet-icon" which is icon which is showing only on given browser width,are overlapping.Even search icon is going beyond tablet icon when browser is really tiny width.I tried with Float:right,leftand position:absolue,relative on both elements ,overflow:auto on site header,margin:left,righton elements and display properties on both elements display:block ,display:inline-block; Nothing works... i don't know where is the problem..
/***********************************************
Header Style
************************************************/
.admin-bar .site-header {
top: 32px;
}
.admin-bar .site-header.is-fixed {
top: -47px;
}
#media screen and (min-width:640px) and (max-width:790px){
.admin-bar .site-header.is-fixed{
top :-44px;
}
}
#media screen and (min-width:413px) and (max-width:783px){
.admin-bar .site-header{
top: 35px;
}
}
.site-header {
position: absolute;
top: 0;
left: 0;
right:0;
height: 80px;
z-index: 4;
border-bottom: 1px solid #eee;
}
/***********************************************
Search menu style
************************************************/
.search-trigger {
position: absolute;
right:0.5em;
top: 30px;
width: 40px;
text-align: center;
cursor:pointer;
cursor:hand;
display:inline-block;
}
#media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
#media screen and (min-width:783px){
.search-trigger{
top:26px;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
/***********************************************
Icon Style
************************************************/
.tablet-icon{
position: absolute;
display:inline-block;
left:90%;
top: 23px;
width: 40px;
float:right;
}
.tablet-icon:before{
width: 100%;
font-size:1.6em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\61";
}
<header id="masthead" class="site-header" role="banner">
<span class="tablet-icon"></span>
<a id="search-trigger" class="search-trigger"></a>
</header>
That happens when you use position:fixed, position:absolut, and z-index. You have to change this in your media queries for each resolution.
When I have resizing issues I replace as many px sizings as I can with %. That way when the screen resizes, the elements resize proportionately. i.e. Change out things at 50px with 5%
Well i make the positions on my elements INSIDE the "" element to relative and float:right; and left my position of<header>to absolute,and it worked like a magic.
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 know there are lots of people asking the div align center problem. But I tried most solution and it seems won't work in my case. Sorry that I have to ask here. I created the floating ad at my site http://tacfeed.com using the following css,
/* Default Stylesheet */
#close {
margin-left: auto;
margin-right: auto;
float:left;
display:inline-block;
padding:2px 5px;
color:black;
background: #fff;
}
#responsive-adsense {
display: none;
}
#responsive-adsense{
display: none;
}
/*
GENERAL MEDIA QUERY FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/
#media only screen and (max-width: 1023px) {
.adcontainer {
display: none;
}
#responsive-adsense{
display: none;
}
}
#media only screen and (max-width: 899px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 728px !important;
display: block !important;
margin:0;
}
}
#media only screen and (max-width: 767px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 728px !important;
display: block !important;
margin:0;
}
}
#media only screen and (max-width: 599px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 468px !important;
display: block !important;
margin:0px;
}
}
#media only screen and (max-width: 479px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 320px !important;
display: block !important;
margin:0px;
}
}
/* Here's the css for mobile devices */
#media only screen and (max-width: 320px) {
.adcontainer {
width: auto !important;
padding: 0px !important;
height: 50px !important;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 320px !important;
display: block !important;
margin:0px;
}
}
/*
Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking.
When you update your theme, backup this file and re-add it after.
*/
/* Global */
.mystyle {}
/* Tablet - 800px, 768px & 720px */
#media only screen and (min-width: 720px) and (max-width: 800px) {
.mystyle {}
}
/* Mobile - 480px & 320px */
#media only screen and (max-width: 719px) {
.mystyle {}
}
/* Mobile - 320px */
#media only screen and (max-width: 479px) {
.mystyle {}
}
And here is the HTML code at footer, before the end of .
<div class="adcontainer" style="background-color: rgba(255, 0, 0, 0)">
<div id="responsive-adsense">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>[X]</span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mobileadfor2013 -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-2658894403753596"
data-ad-slot="4801520732"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</body>
Now, I got two problems. First, the ad align center in portrait mode, but it won't align center if I rotate my iPhone or Android phone to landscape. I tried to use "vertical-align", "margin", "float" and all seems no luck.
Second, the ad does not align to the very bottom of the screen. You can try to visit our site tacfeed.com on mobile. You can see there is at least 1 px left in the bottom area.
Any help or advise would be appreciated.
It seems people don't know this solution to position things to center...you always think the solution needs to be complicated in order to work but you can do this with CSS and it has support on all browsers...
To align verticaly to center a div you only need to add:
position: absolute;
left:0;
right:0;
margin: auto;
Horizontal:
position: absolute;
top:0;
bottom:0;
margin: auto;
And now, absolute center:
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
+Update
AND, here is a jsfiddle to show that/how it works
++Update
Also, this comes as an update, since now your ad is position:absolute, you can add bottom:0 to it and it will stick to the bottom, no pixels in between.
+++Update
And another jsfiddle to show the exact way of aligning it to center and make it stick to the bottom
I'm using the dashboard template example that comes with Bootstrap. Sidebar disappears after a certain screen size and that's fine. But I want to set a specific width until that point. Now it's kind of responsive and stretches in width on bigger screens (it's a bit nasty on large monitors.) A good width would be 250px.
CSS
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #31373d;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
color: #98a7b5;
}
.nav-sidebar > li > a:hover {
background: transparent;
color: #fff;
}
.nav-sidebar > .active > a, .nav-sidebar > li > a:hover {
color: #fff;
background-color: #272c30;
}
/*
* Main content
*/
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
Any ideas? Thanks.
Source code is avaliable at getbootstrap.com
How about a max-width: 250px in your .sidebar CSS?
You could use a CSS media query to set a max-width on larger screens..
#media (min-width: 992px){
.sidebar {
max-width:250px;
}
}
Demo: http://www.bootply.com/126485
I just ran into the same issue. For me I was happy for the sidebar to remain fluid for the small and medium viewports. At a large viewport of 1200px or more I want to have a fixed width of 250px and then have the main content area cover the rest.
In the HTML give your main content div a class name or id. This will make it easy to select it in your css media query. Here i've used a class called 'content'.
<div class="col-sm-3 sidebar"> ... </div>
<div class="col-sm-9 col-sm-offset-3 content"> ... </div>
Then add your css:
#media(min-width:1200px){ // breakpoint where I set a fixed sidebar width. You can change this to whatever you want.
.sidebar {width:250px}
.content {margin-left:0;padding-left:265px;width:100%;} // reset the width and margin, overwriting the bootstrap grid. Add padding to the left to equal the width of your fixed width sidebar + half your defined grid gutter width. For me that is the default 15px.
}
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.