# How to resize buttons in PineGrow 4 (or 3... and 2!) with media queries

**URL:** <https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500>\
**Category:** Styling (CSS)\
**Created:** [January 12, 2018, 1:38pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500 "2018-01-12T13:38:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 12, 2018, 1:38pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500/1 "2018-01-12T13:38:53Z")

</div>

Hi, I’m struggling to use Media queries here to resize bootstrap buttons that GROW in width as the screen size DECREASES.

Ive seen a video, somewhere in the distant past of how to do it on one of Matjaz’ videos, but I can’t find that, and its probably an outdated video now and I can’t find it in our Pinegrow v4 docs either.

so! How to use the 3 different generations of Pinegrow, to stop a bootstrap button increasing in size as the screen size decreases using media queries.  
any complete help or links to info would be great thanks as I’m stumped.  
Ive never successfully used the PG media queries so if explaining, could you please show all the steps?

thanks 🙂

oh! its for the REALLY NICE PURPLE button here 🙂

[http://swethtaraorganics.co.uk](http://swethtaraorganics.co.uk)

ps, im currently only using PG 2.951 and 4.1, so 3 is not necessary for me, but might be for others who look this up too

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 13, 2018, 1:14pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500/2 "2018-01-13T13:14:13Z")

</div>

Anyone?  
Before I spend a day of my life (or more) trawling through the old videos until I find the bit where @matjaz resizes the button on an mobile page? I thought it was the _oldie but goodie_ video with the mobile phone pictures in it, but I didn’t notice it there

---

<div class="post-metadata">

**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\
**Post date:** [January 13, 2018, 9:59pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500/3 "2018-01-13T21:59:51Z")

</div>

remove the class btn-block from your links.

Cheers

Thomas

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 14, 2018, 4:19pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500/4 "2018-01-14T16:19:09Z")

</div>

Cheers for that Thomas! sorry for delay there, I didnt check in till late yday on the forums and just playing with it now. It works great on the first button, but the second one is sort of _lost_ on smaller (tablet) screen size.

I need to add padding below it and maybe stop it going SO small in that instance.

I will look again shortly . Thanks

---

<div class="post-metadata">

**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\
**Post date:** [January 14, 2018, 9:56pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500/5 "2018-01-14T21:56:52Z")

</div>

> [@schpengle](#):
>
> but the second one is sort of lost on smaller (tablet) screen size.

There you miss the general .btn class and you have to remove the btn-block class as well (certainly).

I’m honest that I’m not aware of those frameworks and how they work. All I do is inspecting the source code. So I can’t speak for the “wtf does this happen?”.

Cheers

Thomas

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 15, 2018, 11:20pm UTC](https://forum.pinegrow.com/t/how-to-resize-buttons-in-pinegrow-4-or-3-and-2-with-media-queries/1500/6 "2018-01-15T23:20:50Z")

</div>

CHeers @Thomas!

yes, I removed the wrong .btn instead of the btn-block.  
dyslexia! gah!

Starting to play with the firefox developer tools too to debug.
