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.
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.
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 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;
}
#searchInput {
width: 50% !important;
height: 50% !important;
display: block;
position: relative;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
color: #FF7F27;
top: -300px !important;
left: 100px !important;
background: transparent;
font-size: 85%;
I'm doing this in main.css for monobook skin in mediawiki. For some reason, main.css is ignoring my !important because it's still not centering the div. What am I doing wrong to have my code keep getting ignored? How can I fix this? Im not asking how to center. Im asking why my divs code is bein ignored even when its proper.
Technically, this div is already centered because the width is 100%...
We need to see the bigger picture here as presumably this div is inside something else which is prompting you to try to override said div's css using !important?
This is the kind of thing you should be doing:
body {width: 100%}
#searchInput {width:50%; margin: 0 auto; display: block;}
which would end up with a centered #searchInput div on the page...
http://jsfiddle.net/ndmdpd69/
I have a simple page with two offcanvas menus, one in which side, they both work normally when in english, but since I also need to support arabic, I use the dir="rtl" in the html tag, and with it the right offcanvas menu have some weird behaviour on Chrome, looks like a repaint issue, when I resize the window it goes to the right position (sometimes it goes randomly after a few seconds as well).
I'm using transform: translateX(); and transform: translate3d(); in the body to achieve this, and as far as I can see there's nothing wrong.
Here's a codepen example of the bug: http://codepen.io/Ghostavio/pen/WbgXXZ
Its a simple thing I did Hope This is your answer
What I did was made the body position Fixd
in body:
position: fixed
Your New CSS will look like this:
box-sizing: border-box
body
padding: 5%
position: fixed /*Changed Here*/
overflow-x: hidden
transition: .3s ease-in-out transform
&.left-offcanvas-active
transform: translateX(270px)
//transform: translate3d(270px, 0, 0)
&.right-offcanvas-active
transform: translateX(-270px)
//transform: translate3d(-270px, 0, 0)
header
text-align: center
position: relative
img, svg
vertical-align: middle
a
text-decoration: none
.logo img
width: 240px
max-width: 100%
.gc
fill: #8E8E8E
.content
text-align: justify
.hamburger-icon
position: absolute
top: 10px
left: 0
cursor: pointer
.second-icon
left: auto
right: 0
.left-offcanvas, .right-offcanvas
witdh: 270px
min-width: 270px
height: 100%
background-color: #BABACA
position: fixed
display: block
top: 5%
.left-offcanvas
left: -270px
.right-offcanvas
right: -270px
.offcanvas-links
display: block
padding: 20px
color: #117EBF
border-bottom: 1px solid #E1E1E1
font-weight: 800
text-decoration: none
span
background-color: #C80428
color: #FFF
padding: 0 5px
border-radius: 2px
font-weight: 400
float: right
Hope this helps you.
I had a similar issue creating a sticky header on a horizontal scrolling table for RTL. What I found is that in order to get position : sticky to work for RTL without JS, I had to assign z-index to both the sticky column (sticky header) and the scrollable columns.
At first I used JS to position everything and add offset padding to get the sticky header effect. But after a walking away in frustration and returning to it days later did I come up with a CSS only solution.
JSfiddle example