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

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 :slight_smile:

oh! its for the REALLY NICE PURPLE button here :slight_smile:

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

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

remove the class btn-block from your links.



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

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!

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

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