SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Change add to any button sizes on small devices wi

3 years 3 months ago #126168 by artctrldel.info@gmail.com
Change add to any button sizes on small devices wi was created by artctrldel.info@gmail.com
Hi guys,

I want to change add to any button sizes on small devices with custom css.

This is my best offer:


@media (max-width: 480px) {
#a2a_button_stumbleupon {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}


@media (max-width: 480px) {
#a2a_button_tumblr {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
#a2a_button_reddit {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
#a2a_button_sms {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
#a2a_button_email {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
#a2a_button_facebook {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
#a2a_button_dd {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

Is there an easier way to do it? Can I target all buttons with one class and selector?

Will it work?

Thanks

Benjamin

artctrldel.net/categories/contemporary-a...ngs-by-kristina-webb

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 3 months ago #126177 by Valentin
Hi Benjamin,

In general, your approach is correct, however note you need to point to classes, not ids.

Buttons uses classes, so replace # with a point:
.a2a_button_facebook

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: afzoneh, artctrldel.info@gmail.com

Please Log in to join the conversation.

3 years 3 months ago #126179 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change add to any button sizes on small devices wi
Hi Valentin,

I tried :

@media (max-width: 480px) {
.a2a_button_tumblr {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
.a2a_button_reddit {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
.a2a_button_sms {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
.a2a_button_email {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
.a2a_button_facebook {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

@media (max-width: 480px) {
.a2a_button_dd {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

Unfortunately without luck. Nothing happens.

What to do? :D

THANKS

Benjamin

artctrldel.net/categories/illustrations/...ions-by-hans-jenssen

Please Log in to join the conversation.

3 years 3 months ago #126181 by Valentin
By using Firebug, you will notice the selector to use is a span inside the classes you pointed. See example below:


Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

3 years 3 months ago #126182 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change add to any button sizes on small devices wi
Hi Valentin,

So the correct approach would be:

@media (max-width: 480px) {
.a2a_svg a2a_s_default a2a_s_facebook {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

???

Best

Benjamin

Please Log in to join the conversation.

3 years 3 months ago - 3 years 3 months ago #126183 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change add to any button sizes on small devices wi
or:

@media (max-width: 480px) {
.a2a_button_facebook .a2a_svg {
height: 50px;
width: 50px;
background-size: 100% auto !important;
}
}

Please Log in to join the conversation.

3 years 3 months ago #126185 by Nick
Hi Benjamin,

You're really close!

Since the styling is inline for the div, your code won't take affect. The only way to override the inline styles is to add a "!important" to the declaration.

You can also add other selectors by separating them with a comma.

The following code should work well Twitter and Facebook:
@media (max-width: 480px) {
 .a2a_s_twitter, .a2a_s_facebook {
width: 50px !important;
line-height: 50px !important;
height: 50px !important;
background-size: 50px auto !important;
}
}

You can add the other services by separating them with a comma like the above example.

Hope this helps! Let us know if you have any questions and we'll be glad to answer.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

3 years 3 months ago - 3 years 3 months ago #126186 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Change add to any button sizes on small devices wi
Hi Nick,

For some reason the outcome is not as expected :D (image attached)

I used this code:

@media (max-width: 480px) {
.a2a_s_twitter, .a2a_s_facebook, .a2a_s_pinterest, .a2a_s_tumblr, .a2a_s_reddit, .a2a_s_sms, .a2a_s_email, .a2a_s_dd, .a2a_s_stumbleupon, .a2a_s_google+ {
width: 50px !important;
line-height: 50px !important;
height: 50px !important;
background-size: 50px auto !important;
}
}

Thanks

Benjamin

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 3 months ago #126189 by Nick
Hi Benjamin,

I'm guessing the + after the "google" is breaking your code. It should instead be "_plus". Also, be sure to add the .a2a_s_a2a for the final icon.

The following code worked well for me:
@media (max-width: 480px) {
.a2a_s_twitter, .a2a_s_facebook, .a2a_s_pinterest, .a2a_s_tumblr, .a2a_s_reddit, .a2a_s_sms, .a2a_s_email, .a2a_s_dd, .a2a_s_stumbleupon, .a2a_s_google_plus, .a2a_s_a2a {
width: 50px !important;
line-height: 50px !important;
height: 50px !important;
background-size: 50px auto !important;
}
}

and produced the following result:


Please give that a try and let us know how it works out for you.

By the way, we've moved to a faster and improved support system. All the old forum topics are going to be locked in a bit, but you can continue the discussion (and post new questions) at www.ostraining.com/support/

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

The following user(s) said Thank You: artctrldel.info@gmail.com, rajy1234

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!