|
sky
|
December 17, 2019 at 7:06 am
Hi Guys
YOu already helped me to fix the Mobile View for the Ticket Selector Table.
I got an other table (the “Details”-Table on registration-checkout page) which one looks bad on mobiles. Could you please let me know the CSS code to fix that issue?
https://www.skydesign.ch/neudikids_neu/registration-checkout/
Thank you so much for your help!!
Cristina
|
|
Josh
|
December 17, 2019 at 8:26 am
Hi Cristina,
You can add the following CSS:
@media screen and (max-width : 600px){
.spco-ticket-info-dv table tr th,
.spco-ticket-info-dv table tr td,
.spco-ticket-info-dv :last-child{
font-size: 12px;
}
}
What that will do is bump down the text size a bit when the viewport’s width is less than 600 pixels. This way all 4 columns will fit.
|
|
sky
|
December 17, 2019 at 1:35 pm
Hi Josh
Thanks for your help.
Unluckily, the code works, but not well 🙁
The text becomes smaller, but not the Detail-Text as well the table is still same size as before.
Any other ideas to see on mobiles the complete infos in the table?
Thanks for your feedback.
Cristina
|
|
Josh
|
December 17, 2019 at 1:49 pm
Hi Cristina,
The challenge here is your theme is overriding the styles. The following CSS can be used instead:
@media screen and (max-width : 600px){
.spco-ticket-info-dv table tr th,
.spco-ticket-info-dv table tr td,
.spco-ticket-info-dv :last-child,
.spco-ticket-info-dv table tr td span{
font-size: 12px !important;
}
}
|
|
sky
|
December 17, 2019 at 2:39 pm
Oooh sensationell!!! This works!
Thanks Josh for your estimated help!!
Have a nice day,
Cristina
|
