|
CottonEyedJoe2018
|
October 24, 2018 at 1:43 pm
Hello!
I’m trying to use CSS to make the font sizes in the ticket selector table get smaller on smaller screens because right now even on largeish phones the table runs off the edge of the screen.
I’ve tried a ton of selectors that work when I put them into Chrome’s inspector but don’t actually pull when I put them into my style.css – here’s my media query with the things I’ve tried:
@media screen and (max-width:450px) {
td.tckt-slctr-tbl-td-name, .entry-content table, div.event-tickets .tkt-slctr-tbl-wrap-dv, .event-tickets, .entry-content .event-content,
.espresso_events .entry-content .event-content table, .entry-content .tkt-slctr-tbl, .entry-content .tkt-slctr-tbl table, td.tckt-slctr-tbl-td-price.jst-rght {
font-size: 14px !important;
line-height: 16px !important;
}
}
Other CSS from the style sheet is working – for example the float:none I put on the Buy Now button, but I can’t seem to touch the font size in that table.
Any help would be appreciated!
Thanks!!
Jessica
|
|
CottonEyedJoe2018
|
October 24, 2018 at 1:44 pm
I just realized I forgot to post a link: https://www.cottoneyedjoe.com/shows/wivk-concert-for-a-cause/
Thank you!
|
|
Josh
|
October 24, 2018 at 1:56 pm
Hi,
A slightly wider breakpoint will help, some negative margins, and a few targeted selectors for the text sizes too. Here’s an example:
@media screen and (max-width:600px) {
.tkt-slctr-tbl th,
.tkt-slctr-tbl tr td,
.tkt-slctr-tbl tr td strong {
font-size: 14px !important;
line-height: 16px !important;
}
.tkt-slctr-tbl-wrap-dv {
margin-left: -1.25rem;
margin-right: -1rem;
}
}
|
|
CottonEyedJoe2018
|
October 24, 2018 at 2:34 pm
Thank you! That looks way better on my larger phone; however on my smaller work phone the table cuts off the quantity field – do you have any suggestions for making it work well on smaller phones?
|
|
Josh
|
October 24, 2018 at 3:48 pm
You could add this additional media query:
@media screen and (max-width:450px) {
.tkt-slctr-tbl th,
.tkt-slctr-tbl tr td,
.tkt-slctr-tbl tr td strong {
font-size: 12px !important;
line-height: 14px !important;
}
.tkt-slctr-tbl-wrap-dv {
margin-left: -1.5rem;
margin-right: -1.25rem;
}
}
|
