Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which image are you referring to?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Is this intentional then:
@media screen and (max-width: 380px) {
?
From this:
@media screen and (max-width: 380px) {
.widget {
margin-top: 0px !important;
}
.alignright {
float: right;
margin: -217px 15px 2px 15px;
}
It looks like you have some conflicting classes within your style.css file. You can either combine the attributes into the same class, or you can add “!important” to the end of the attribute in order to make that one take preference over the others.
for example:
a img.alignleft {
float: left !important;
margin: 0px 15px 15px 0px !important;
}
Did you update your code since this post? It looks like it’s sitting fine on your page to me. Both in firefox and chrome.
Oh I’m sorry. Go to the “meet us” page. It’s there.
I haven’t touched the code, i would like it to sit right next to my paypal button on the http://ai.dorianlatelle.com/about-us/
page
Just checked it again and it’s still out of place.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your theme is responsive, right?
From what I can see at the moment, you’re putting the image in a secondary widget. If you want the image to sit to the right of the DONATE paypal buttons you’re going to have to put the code for the image within that same widget you’re using for the paypal buttons.
If you can see the code for the FORM in the widget you’re using, paste it at the bottom like this:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<div class="paypal-donations">
<input name="cmd" value="_donations" type="hidden">
<input name="bn" value="TipsandTricks_SP" type="hidden">
<input name="business" value="[email protected]" type="hidden">
<input name="item_name" value="General Donation" type="hidden">
<input name="item_number" value="Aliquippa" type="hidden">
<input name="rm" value="0" type="hidden">
<input name="currency_code" value="USD" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" height="1" width="1">
<img alt="" class="attachment-full alignright" style="max-width: 100%;" src="http://ai.dorianlatelle.com/wp-content/uploads/2015/05/AIHAND-e1433887780844.png" height="90" width="78">
</div>
</form>
Thank you, where would I be able to find the code for my paypal widget within my file manager?
Check in Appearance > Widgets.
If you don’t see the inclusion of the widget in there, you can actually paste the code you want directly into a TEXT Widget.
I’m going to leave work right now and drive home but when I get there if you haven’t figured it out yet, I’ll help you.
Ok, I’m actually away from my computer but I’ll be back home later tonight so I’ll keep you updated. You’re awesome for helping man!
@dorianstevens, what The Dro is suggesting is a much better solution for your need than modifying your stylesheet…..no doubt the style “alignright” may be used on other images or parts of your website, modifying such a broad selector for one image will effect any other image or block of content that has the style class of “alignright”, which is probably not what you intend.
In the future, using the Inspector to find the right selector is smart, but if you only want to modify the style for a single image, be sure to be very specific about which id/class – in the case of your lovely hand logo, you’d want to target the widget and then the image, like so:
aside#widget_sp_image-2 img {your styles here}
This way your modifications will ONLY apply to the image that is within that particular widget and nothing else.
Keep in mind this is just an example intended to help you learn CSS – as mentioned The Dro’s solution is better.
