|
Megan MacCarthy
|
February 11, 2013 at 7:55 pm
Hi!
I almost have everything up and running – just have two minor questions:
The payment page has a bunch of white space above the Paypal button. I added div#off_site_payment_container br {display:none;}
to my custom css but it did not work. I’m not a developer but know a little – anything else I should try?
Also, is there any way to make the calendar appear smaller? The calendar does not display fully when viewing from a smartphone (I’m using a response template)?
Thanks so much for your help!!
|
|
Megan MacCarthy
|
February 11, 2013 at 7:56 pm
Hi! I almost have everything up and running – just have two minor questions: The payment page has a bunch of white space above the Paypal button. I added div#off_site_payment_container br {display:none;} to my custom css but it did not work. I\’m not a developer but know a little – anything else I should try? Also, is there any way to make the calendar appear smaller? The calendar does not display fully when viewing from a smartphone (I\’m using a response template)? Thanks so much for your help!!
|
|
Josh
|
February 11, 2013 at 8:20 pm
Hi Gianna,
It sounds like your theme has removed the standard WordPress auto-format function. In which case, you could try wrapping the [ESPRESSO_EVENTS] shortcode in raw tags.
It will look like this:
[raw][ESPRESSO_EVENTS][/raw]
With the calendar, can you post a link to the calendar page so we can take a look?
|
|
Megan MacCarthy
|
February 11, 2013 at 8:42 pm
Sure…the calendar link is :
http://bearfootyogahealing.com/yoga/calendar/
Looks great on a laptop…not so great on a phone!
|
|
Josh
|
February 11, 2013 at 9:05 pm
Hi Gianna,
It’s the calendar header that’s not so responsive.
Here’s a bit of some CSS media queries that you can add to a custom stylesheet via a child theme, the my custom CSS plugin or the Jetpack plugin’s custom CSS feature that will hide some of the buttons on small screens (and move a few things around in between other break points).
@media screen and (max-width: 768px) {
.fc-header-center {
position: absolute;
margin: -35px auto 0;
}
}
@media screen and (max-width: 600px) {
.fc-header-center {
position: relative;
margin: 0 auto;
}
}
@media screen and (max-width: 480px) {
input[type=text] {
max-width: 200px;
}
.fc-button-month {
display: none;
}
.fc-button-agendaDay {
display: none;
}
.fc-button-agendaWeek {
display: none;
}
.fc-button-today {
display: none;
}
.ui-corner-right {
-webkit-border-bottom-left-radius: 6px;
-khtml-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-khtml-border-top-left-radius: 6px;
border-top-left-radius: 6px;
}
}
|
|
Megan MacCarthy
|
February 11, 2013 at 9:31 pm
Thank you so much! I will try this and let you know what happens. Thanks again for your time!
|
|
Megan MacCarthy
|
February 11, 2013 at 9:45 pm
Payment page fix worked great…calendar fix not so much. I copied and pasted the css into the Jetpack css feature but nothing has changed…phone still cuts off the calendar. 🙁
|
|
Josh
|
February 12, 2013 at 11:32 am
Hi Gianna,
I took a look and it did change things, but the text size is still pretty big. I’d suggest dropping this into the 600px media query so the dates at the top of the calendar are smaller on smaller screens:
.fc-header-title h2 {
font-size: 16px;
line-height:22px;
}
|
|
Megan MacCarthy
|
February 12, 2013 at 8:19 pm
Hi Josh – got it! Worked great. Thank you so much for all your help. Much appreciated!
|
