I am having trouble aligning LinkedIn share button on a website. Check the screenshot below -
You can find it live here. The button aligns well on other parts of that page but when it is placed above or below title then it somehow misbehaves.
How can I fix this?
I think this will solve your problem
span.IN-widget > span{
display:block !important;
}
Then clear <br> whick is between them and don't forget to clear element style to display.
In a custom CSS file, add the following:
.IN-widget > span > span {
height: 30px;
}
Make sure the Custom CSS file order is the last.
Output:
Thanks to all those who tried to help! I finally managed to get it aligned.
Solution:
Since the issue occurs only when the buttons are positioned above or below title text so first of all I programatically added a custom class to the LinkedIn button container - btnsx-li-height. Then I applied the below CSS -
.btnsx-li-height .IN-widget {
position: relative;
}
.btnsx-li-height .IN-widget > span > span > span {
position: absolute;
left: -30px;
bottom: -20px;
}
Related
Here is link for bootstrap accordion with plus and minuses: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion-with-plus-minus-icon
How to put buttons as shown in this link: https://ibb.co/GJRGKnn
Also I want to change button's style as shown in this link: https://ibb.co/GPTGpp8
Thank You!
Please add this css and check agian.
.accordion-button::after {
position: absolute;
left: 0;
}
I have an icon which is actually on my webpage but I still cant see it.
HTML
<i class="iconMan"></i>
CSS
.iconMan{
background-image: url(../../assets/imgs/iconMan.png);
display: block;
}
this is what I get:
The Icon should be next to "Test User" but it's not showing. I already tried adjusting height and width but it didn't work.
Any suggestions what I could do?
for displaying an icon you can move your styling to the ::after or ::before pseudo selectors.
.iconMan {
display: inline-block;
}
.iconMan::before {
content: url(../../assets/imgs/iconMan.png);
}
You have missed quotes
.iconMan{
background-image: url("../../assets/imgs/iconMan.png");
display: block;
}
try to do like this
<img src="/assets/imgs/iconMan.png"
I guess it will work
just put this to your html code
Been beating my head against this problem for a bit... It is probably either really easy to do and I am a dolt, or really hard to do and not worth it. Basicly I have a wordpress theme that has a nice Event widget included. It works great but it puts a lame "Free Entry" button on every event. All of our events are free so it's just kind of an eyesoar. I have been trying to edit the stylesheet to remove it but I can't figure it out. Here is the site I am working on: http://comerestministries.com/wordpress/homepage3/
The code I am looking at I think is this:
<li class="ecs-event">
<a href="http://comerestministries.com/wordpress/event/awakening-of-love-2/">
<p>May/12</p>
<p>18:30</p>
<h3>Awakening of Love</h3>
<span>Free entry</span></a></li>
Is there an easy way to remove that final Span tag every time it tries to display... like a "display: none !important;" tag? I tried to add that to the style sheet but couldn't quite figure it out.
The above answer is correct. That hides the span. This fixes the aftermath of the space left behind.
.ecs-event-list li.ecs-event a > span{
display: none;
}
.ecs-event-list li.ecs-event a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
looking at your wp theme, you can like this:
.ecs-event-list li span {
display: none;
}
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.