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;
}
Related
I'm working on a presentation with ioslides (Rmarkdown). Since the corporate design rules for our university state that the logo should be on the right side (so the two faces look into the document) I'ld be happy if someone can help me with adjusting the ioslide theme via css or in the pandoc template.
The image and grey box should come in from the right side. I wasn't able to do that. All I could do was making the grey so long that is reaches the right side (which moves the logo as well cause it is relatively placed to the grey boxes right end as it seems to me).
Here is some CSS code I already found and experimented with:
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 90% !important; # with 250px instead of 90% it produces the image posted below
height: 170px !important;
}
This is the code produced after kniting: https://box.hu-berlin.de/f/d3d9e907fcef41a0bbf1/
I don't understand where the gdbar code resides in the first place. Would be happy about a hint here as well.
Edit: I have now this CSS setup and am almost done. Only the logo should be shifted a little bit to the left.
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 250px !important;
height: 170px !important;
}
aside.gdbar {
left: initial;
right: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
background-position: right;
}
Best regards, Simon
Your element has left: -1px property what makes sure it's always on the left. If you set left to initial:
aside.gdbar {
left: initial;
right: 0;
}
or you remove this left setting then your element will move to the right.
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;
}
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.
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
Code given:
http://jsfiddle.net/95u9Q/
#wrapper_login {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
background: black;
}
#login {
z-index: 22;
width: 300px;
height: 400px;
margin: -200px auto 0 auto;
background: #000;
}
The centering works fine! The Problem is: If having a windows height below 400px the full #login should be visible and scrollable. currently a scrollbar is visible, but it is not possible to see the full #login, the scrollbar just don't contains the whole #login.
I think its because of position absolute and the negative margin-top, also I don't know how to improve the code so it works in the way it should.
Thanks in advance for the help!
Your parent container that is #wrapper_login should have a relative position instead. and the child container #login the position of absolute for this to work seamless across different Resolutions. You could use top and left values for #login to set it at the right postion.
Looks like a job for a media query
#media screen and (max-height: 400px) {
#wrapper_login { position: static; }
#login { margin: 0 auto; }
}
http://jsfiddle.net/95u9Q/2/