I uploaded icons to my menu using class and css code (Wordpress + Elementor), but I can't remove the space between the icon and the text.
Used the following code example:
.frio
{
background-image: url('https://zine.unlatino.com/wp-content/uploads/2022/05/icon_frio.svg');
background-repeat: no-repeat;
background-position: left;
background-size: 30px;
padding-left: 5px;
}
Maybe I'm missing correctly modifying the code so that the text follows after the icon.
Thank you!
try adding to your class css
margin-left:5px; // based on ur preference
if that dosen't work u can try the following
position:relative;
left:5px; // based on ur preference
altghought i recommend you try to find what's going on using the development tool
I don't know if it's the best solution, but removed the CSS and added
<img src="https://zine.unlatino.com/wp-content/uploads/2022/05/icon_frio.svg" width="32" height = "32" />
in front of the text and aligned as expected.
If there is any other solution feel free to comment.
Related
I am having a problem setting the right place to one link in my css code:
The link is a text "hide" placed on the upper right corner on the footer banner of this website: http://iknowfirst.com
I want to place a little bit lower
The specific css code is here: http://iknowfirst.com/wp-content/plugins/yith-footer-banner/assets/css/style.css
Besides that, I cannot see the image: "images/mailwhite.png" that is set to show on the email field.
Someone can give me a light?
Thanks in advance!
the text "hide" inside ul.hiderzone - you need to decrease margin-bottom for the ul.
About css:
css path is:
http://iknowfirst.com/wp-content/plugins/yith-footer-banner/assets/css/style.css
path to image written as
url(../images/mailwhite.png)
so, real image path is:
http://iknowfirst.com/wp-content/plugins/yith-footer-banner/assets/images/mailwhite.png
UPD: you copy css rules into page body, so fix line 266.
Instead:
background-image: url("../images/mailwhite.png");
place:
background-image: url("/wp-content/plugins/yith-footer-banner/assets/images/mailwhite.png");
Here is the solution for your 2 issues
1) Placing a link
Solution : in your CSS
.hiderzone {
right: 10px;
top: -12px; /*Edit this, this will help you*/
bottom: 2px;
/*top: auto;*/ /*You should not use "TOP" twice */
list-style: none; }
2) You can use relative or absolute image path
Relative Path
background-image: url("../images/mailwhite.png");
Absolute Path
background-image: url("/wp-content/plugins/yith-footer-banner/assets/images/mailwhite.png");
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I am using the Facebook like box code in my side bar by pasting the Facebook code into a text widget. My theme is responsive, and I'd like to get the like box to resize correctly. I found this tutorial but he says the way he is doing it, isn't "fully responsive" so I didn't know if there was a better way to do it.
NOTE: this answer is obsolete. See the community wiki answer below for an up-to-date solution.
I found this Gist today and it works perfectly: https://gist.github.com/2571173
(Many thanks to https://gist.github.com/smeranda)
/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
/*
This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it.
*/
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
Tested in most modern browsers.
NOTE: Colin's solution didn't work for me. Facebook may have changed their markup. Using * should be more future-proof.
Wrap the Like box with a div:
<div id="likebox-wrapper">
<iframe src="..."></iframe> <!-- likebox code -->
</div>
and add this to your css file:
#likebox-wrapper * {
width: 100% !important;
}
As of August 4 2015, the native facebook like box have a responsive code snippet available at Facebook Developers page.
You can generate your responsive Facebook likebox here
https://developers.facebook.com/docs/plugins/page-plugin
This is the best solution ever rather than hacking CSS.
The answer you're looking for as of June, 2013 can be found here:
https://gist.github.com/dineshcooper/2111366
It's accomplished using jQuery to rewrite the inner HTML of the parent container that holds the facebook widget.
Hope this helps!
None of the css trick worked for me (in my case the fb-like box was pulled right with "float:right"). However, what worked without any additional tricks is an IFRAME version of the button code. I.e.:
<iframe src="//www.facebook.com/plugins/like.php?href=..."
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:71px; height:21px;"
allowTransparency="true">
</iframe>
(Note custom width in style, and no need to include additional javascript.)
I was trying to do this on Drupal 7 with the " fb_likebox" module (https://drupal.org/project/fb_likebox). To get it to be responsive. Turns out I had to write my own Contrib module Variation and stripe out the width setting option. (the default height option didn't matter for me). Once I removed the width, I added the <div id="likebox-wrapper"> in the fb_likebox.tpl.php.
Here's my CSS to style it:
`#likebox-wrapper * {
width: 100% !important;
background: url('../images/block.png') repeat 0 0;
color: #fbfbfb;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
border: 1px solid #DDD;}`
Can anyone tell me how I can center the image thumbnail relative to the large image?
I can only edit the css, as I am using a proprietary cart solution: http://cailinshea.com/#ecwid:category=1200474&mode=product&product=4321711
Additionally; I can write PHP - but haven't touched Javascript in years... is there a better cart solution that I could implement with Wordpress easily? I am finding it increasingly difficult to customize the design of this wordpress site with ecwid cart.
Thank you for any help!
div.ecwid-productBrowser-details-GalleryPanel-imageContainer needs to be centered within div.ecwid-productBrowser-details-GalleryPanel. It's currently set to float: left, remove that and add:
margin-left: auto;
margin-right: auto;
That did the trick in Chrome's dev tools.
I really like Enstore, but it's not Wordpress. But yeah, this cart plugin has really ugly html...
following should work:
#ecwid_body div.ecwid-productBrowser-details-GalleryPanel-imageContainer{
margin:0 auto !important;
float:none !important;
}
.ecwid-productBrowser-details-GalleryPanel > div:first-child{
margin:0 auto !important;
}