CSS / replicate shortcode button/mobile styles don't work WordPress
- SOLVED
Hi -
I'm working with the 'avada' theme and I have a shortcode that creates a single button (labeled 'SEE THE DEMO') which is on the page just above the footer [[LINK href="http://66.147.244.240/~schoolwi/schoolwise/"]]here[[/LINK]] <- (this is how I want the button to behave on mobile)
I've tried to replicate this on another page with [[LINK href="http://66.147.244.240/~schoolwi/schoolwise/account/"]]two buttons in that area[[/LINK]] - and although it looks like it is supposed to on the desktop version, on the mobile version it's not correct ('SEE THE DEMO' disappears, and 'LET US CUSTOMIZE...' crashes into my h1 on the left.
There is a 'mobile' class on the a tag of the button that shows up when I shrink to view the first link on mobile, but if I add that class to the html of the buttons in the second link, it causes them to disappear.
Help!!
Answers (1)
ghost1227 answers:
Your media.css file has the following code:
@media only screen and (max-width: 800px) {
.continue {
display: none;
}
}
This is responsible for hiding the demo button (it has the continue class applied to it).
In the CSS for your child theme, changing the .superbuttons CSS class to the following will fix the issue with the button flowing behind the text:
.superbuttons {
float: none;
display: inline;
clear: both;
}
wp510 comments:
So that's partially correct (I removed the continue class from the a tag and that fixed the disappearing issue!)
But, check this out - when you shrink the browser down to a mobile width, the button on [[LINK href="http://66.147.244.240/~schoolwi/schoolwise/"]]this page[[/LINK]] goes under the 'Take us for a spin' text, and stretches to fit the width of the browser. The 'mobile-button' class appears on my button when you shrink the browser, then goes away when you stretch it back out.
I'm trying to code the [[LINK href="http://66.147.244.240/~schoolwi/schoolwise/account/"]]two button pages[[/LINK]] so the buttons behave like that.
ghost1227 comments:
You missed the second half of my response, but I'm going to adjust it a bit anyway...
@media only screen and (max-width: 800px) {
.superbuttons {
float: none !important;
display: inline !important;
}
.superbuttons .button.large {
width: 90% !important;
display: block !important;
}
}
Add that to your stylesheet and it should do what you want!
wp510 comments:
YES! That worked! Thank you!!