I can't figure out why the following css works in Firefox, Safari but not in Chrome. I am trying to create a top fixed navbar which is centered and have a full width black background bar while keeping the contents of the navbar to display within 1200px max-width. I need to achieve this in a Squarespace template where I can only add custom CSS to an existing template and I don't have access to the page code. So I elected the pseudo insertion approach. All is good except Chrome doesn't want to display it correctly. The site link:
https://mango-lanternfish-lzhh.squarespace.com/
Thank you for your assistance in advance.
Attila
body, #navigator header#topBar {
max-width: 1200px !important;
margin-left: auto; margin-right: auto; }
#navigator header#topBar { background-color: #000000 !important; }
#navigator header#topBar:before {
content: "";
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 85px !important;
background-color: #000000 !important;
}
Related
Im using semplicelabs to build my website. and im making some fixed social icons that need to be positioned about 50px from the right of the screen like so:
but to do things like this in semplicelabs i have to use custom code to position it and make it fixed. so this is what it looks like currently:
This is the code i have and i gave them these classes. Sould it be my top and left position messing it up?
.icon {
width: 24px;
right: 0px;
}
.fixed-section {
position: fixed !important;
left: 0 !important;
top: 0 !important;
pointer-events: none !important;
mix-blend-mode: multiply;
}
/* This makes our fixed elements clickable */
.fixed-section .column-content {
pointer-events: auto !important;
}
I'm trying to center the text within the slider for the Customizr Pro theme in mobile view. I prefer the offset version built into the theme with the transparent overlay underneath, but the lady wants everything on her site to be centered. I'm not a pro developer but offered my help because she initially just wanted a basic site.
I tried using the code to this answer here that was similar to the CSS I was using already but it didn't work:
How to align middle/center box with text in slider with responsive in mobile view ??
This is what I'm using to center the text, which appears to be fine in desktop view but mobile is not showing up at all:
.carousel-caption {
max-width: 100% !important;
padding: 0 !important;
line-height: 14px !important;
position: absolute !important;
margin-left: unset !important;
text-align: center !important;
top: 175px !important;
left: 0 !important;
right: 0 !important;
}
The website is https://designerbackdrops.com
I still have one other issue with Safari and the tagline being off center but I'll ask about that in a different post.
Thanks for any suggestions you can offer. I'll try anything!
Here is a popular CSS trick for centering things. I have tried it on your website, and it works for desktop and mobile.
.carousel-caption {
max-width: 100% !important;
padding: 0 !important;
line-height: 14px !important;
position: absolute !important;
margin-left: unset !important;
text-align: center !important;
top: 50%;
left: 0 !important;
right: 0 !important;
bottom: auto;
transform: translateY(-50%);
}
Basically the use of these two together should center the object:
top: 50%;
transform: translateY(-50%);
I also added bottom: auto; to override another stylesheet, tc_common.min.css.
Here is a fiddle.
I'm using the Foundation framework, specifically the reveal plugin to have a popup window slide into view after a button is clicked. This will contain one image which I want to fill up the entire popup.
This works well unless the window size is wider than the image, in which case the image no longer fills up the entire popup. I can combat this by overriding some CSS:
.reveal-modal {
padding: 0;
max-width: 950px; /* always will be maximum image width */
background: transparent;
}
However I can't figure out a good way to center the popup horizontally in the window after doing this. Any ideas?
Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:
.reveal-modal-inner {
margin: 0 auto;
position: relative;
max-width: 950px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
Works perfectly, here is the updated fiddle.
This also works...
// styling to make reveal-modal have a max-width
.reveal-modal {
padding: 0;
background: transparent;
border: 0px;
#include box-shadow(none);
}
.reveal-modal-inner {
padding: 1.25rem;
margin: 0 auto;
position: relative;
max-width: 650px;
#include box-shadow(0 0 10px rgba(0,0,0,0.4));
background-color: white;
}
#media #{$medium-up} {
.reveal-modal-inner {
padding: 1.875rem;
}
}
...here i've used compass to handle the box-shadow generation and foundation's scss breakpoints. obviously the max-width in this case is 650px but you can increase that to what suits your situation. inner modal background is set to white so you can see your content/paragraphs/forms/etc.
Hope it helps, works with foundation 5.1
If you images vary in size and you always want them to fill the entire witdth of the modal you can try the CSS3 background-size:contain; to scale an image beyond it's native size. Otherwise just set the width of the modal to the smallest sized image and use width:100%;. Foundation reveal has size classes that you should customize and leverage. Centering the image has to do with it's absolute positioning so you will need to override Foundation's style with:
left: 0;
right 0;
margin: auto;
Very weird issue. The nav-bar background image is loading fine in all browsers except for Safari.
http://lapalomafunrun.com/
Here is the code I'm using:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}
The CSS 3 background shorthand isn't supported in Safari 6.02 (which I'll assume you're using since it isn't working). You can use the CSS 2.1 background shorthand syntax but will need to remove the background-size property to its own declaration:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
background-size: 100% 63px;
}
I was just having the issue where I couldn't apply a background-image property to the <main> element in Safari. Come to find that Safari (currently) doesn't recognize <main> as a block element, as can happen with many of the implementations of HTML5, so setting <main> to display:block did the trick for me. Hopefully that helps.
The new scrollbars in Lion seem to adjust their color in Safari based on the background color of the body element. Is there a way to manually set whether the scrollbar should be dark or light? I know there are webkit CSS options to style the scrollbar which actually predated the new Lion scrollbars. My only issue with using that method is that the bar no longer functions like the real Lion one which fades out after scrolling has stopped. While I suppose that this could be accomplished using CSS animations and javascript for recognizing the start and end of scrolling it would be nice to simply use the real scrollbar w/o all of the "hackery".
Krinkle's fix (or similar) is probably the best, but for those curious, it's somewhat possible to style the scrollbar in Lion, albeit extraordinarily annoying. Here's the basic idea:
html {
overflow: auto;
}
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
visibility: hidden; /* doesn't seem to work */
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,0.5);
}
::-webkit-scrollbar:window-inactive {
visibility: hidden;
}
This is my closest approximation to Lion's default dark scrollbar. Here's where I got this all from: http://css-tricks.com/9130-custom-scrollbars-in-webkit/
From testing on Safari/Chrome it seems it's watching the background color of the body element and the body element only. Not per se the area that is visually underneath the scrollbar.
So when your page has a dark body background-color, it'll show a brighter, contrasting, scrollbar automatically.
For example the following:
html {
background: white;
}
body {
width: 50%;
background: black;
}
.. will trigger a white scrollbar (since the body background is black), however the surface the scrollbar is floating on (the right hand side of the html element) is white, so it's white on white (with a very subtle grey border).
See https://codepen.io/Krinkle/full/aPZNXp in Safari.
Huge thanks to #EdwardLoveall for his answer & corresponding link. This is my variation on his approach for a more iOS-style scrollbar (I'm using Lion + Chrome 19).
::-webkit-scrollbar {
background-color: black;
width: 1.25em /* 20px / 16px */;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.33333);
border: 0.25em /* 4px / 16px */ solid black;
border-radius: 1.25em /* 20px / 16px */;
}
As he noted, you can't really hide the track, but you can but a background on it. Making the background transparent doesn't seem to work either because it sits outside of the HTML element so there is just white below. Also a lot of properties like margin, padding, opacity, etc. don't seem to work but you can add a thick border the same color as the background to give the thumb a little room to breathe.
The only way is to set the light/dark background to html/body so the scrollbar would be of the opposite color and after that add the the desired background to the wrapper.
html,body {
height: 100%;
background: #000;
}
.wrap {
height: 100%;
background: #FFF;
}
The height: 100%; are for stretching the wrapper when there are a little content.