- This topic has 18 replies, 3 voices, and was last updated 1 year, 6 months ago by David.
April 22, 2019 at 7:22 am #875689Alex
I’m trying to make a full width button for my site but having no luck, using the Catalyst theme and i’d like the styling to be the same as the existing ghost button, just at 90% width – I’ve set up a new class and added the Max-width:90%; value in my CSS but no joy!
Any help very gratefully received,GeneratePress 2.2.2GP Premium 1.7.8April 22, 2019 at 10:44 am #875855LeoStaffCustomer SupportApril 22, 2019 at 10:57 am #875862Alex
Sorry I was working on the site earlier and removed it, just added it in again underneath the three recent posts.
AlexApril 22, 2019 at 11:12 am #875870LeoStaffCustomer SupportApril 22, 2019 at 11:13 am #875871Alex
Thanks for your reply,
I’m pretty awful with CSS so I apologise – Do I need to make that button a new class?
AlexApril 22, 2019 at 11:22 am #875878LeoStaffCustomer SupportApril 22, 2019 at 11:28 am #875885Alex
Sort of there but it’s not responsive unfortunately, I tried a ‘max-width: 100%; but no luck – any ideas?
Thanks!April 22, 2019 at 12:51 pm #875940LeoStaffCustomer SupportApril 22, 2019 at 12:58 pm #875942Alex
Oh! Sorry! Not sure what I was doing there! Changed it to 100 but it still wasn’t resizing with the page – added a margin:auto; on there and it’s working fine!
Thank you for your help!April 22, 2019 at 1:09 pm #875948LeoStaffCustomer SupportApril 24, 2019 at 3:46 am #877364Alex
Sorry still having trouble with this – for some reason, when I apply any styling in Simple CSS to the button, the changes appear while the customize tab is open but after I save and close, it all disappears, have tried clearing the cache etc but can’t seem to get it to stay?
This is as i’d like it to display –
border: 2px solid #000;
Is the theme default CSS overriding it?April 24, 2019 at 4:34 am #877397DavidStaffCustomer Support
the CSS for the Ghost Buttons is ovderiding some of the CSS. GhostButtons is in the Additional CSS which comes after Simple CSS.
I would suggest you merge the two of them into either Simple CSS or Additional CSS and make sure that your button.wide CSS comes after the Ghost Buttons.April 24, 2019 at 5:03 am #877422Alex
Thanks for your reply,
So it’s this CSS from Additional CSS?
border: 2px solid #ffffff;
padding: 8px 20px;
transition: all 0.6s ease 0s;
border: 2px solid #08cec7;
Do I need to move that to the Simple CSS section and delete from Additional? Then make my styling for the new button with the ‘a.button.wide’ selector?
Will that not get overwritten if I update the GP theme or is the Additional CSS section also a child?
Thanks!April 24, 2019 at 5:25 am #877431DavidStaffCustomer Support
Simple CSS stores the CSS in the plugin. Additional CSS stores it in the Theme. Updating the Theme won’t effect either. Changing the Theme would of course remove the Additional CSS ( note – it will return when switching back to the original Theme).
So you can choose to use either Additional CSS or Simply CSS. Just cut and paste one into the other. Just making sure that your
a.button.wideCSS comes after the
.button.ghostcss.April 24, 2019 at 5:34 am #877438Alex
I’ve done that but it still doesn’t seem to be working?
- You must be logged in to reply to this topic.