|
shunter06483
|
April 27, 2023 at 2:46 pm
Hello, I am taking over an EE implementation using the Divi Theme and I was asked to make a table mobile responsive as it is too small and the wording overlaps the ticket selector.
I have tried a few of your previous suggestions using CSS, but nothing really seems to effect the layout, and those posts were rather old.
Here is the page – https://h-isac.org/hisacevents/european-cyber-threat-landscape-tour-may-22nd-may-26th/
It looks fine on desktop, but mobile vertical is off. Any reference is much appreciated and apologies in advance if this is a repetitive topic.
|
|
Sam
|
April 28, 2023 at 6:26 am
Hi Anthony,
You can try this CSS to adjust the mobile view of the table:
@media screen and (max-width: 767px){
.single-espresso_events #main-content #content-area #left-area table tr th {
padding: 0 !important;
text-align: left;
}
.single.single-espresso_events .tkt-slctr-tbl-wrap-dv {
padding: 15px 5px;
}
.single-espresso_events #main-content #content-area #left-area table tr td {
padding: 0 !important;
}
.tkt-slctr-tbl-wrap-dv td.tckt-slctr-tbl-td-name {
max-width: 61%;
width: auto !important;
position: relative !important;
float: left;
margin-bottom: 10px;
}
.tkt-slctr-tbl-wrap-dv td.tckt-slctr-tbl-td-name strong {
font-size: 14px;
}
td.tckt-slctr-tbl-td-price.jst-rght span.tckt-price--nowrap {
white-space: normal !important;
text-align: left;
float: left;
}}
Hope that helps.
Thank you.
|
|
shunter06483
|
April 28, 2023 at 6:36 am
That worked, thank you for the quick reply.
Is there a discussion chain or area where that information was located? If I missed it, I apologize.
|
|
Tony
|
April 28, 2023 at 6:49 am
Hi there,
The problem above is there is a bunch of custom CSS on your site setting specific styles which override a lot of EE’s, so the previous solutions you’ve found were also likely being overridden again.
The styles Sam has provided above override some of your sites specific custom styles, so no discussion chain for this as that’s unique to your site.
|
|
shunter06483
|
April 28, 2023 at 6:58 am
Thank you. I will go in and test out the previous/old Custom CSS. Always fun coming in cold to a new project.
Thank you all again for the quick responses.
|
|
Tony
|
April 28, 2023 at 7:44 am
Yep, it’s always a fun time 🙂
Good luck good sir, if you run into any issues just let us know. If its related to EE itself we’ll see what we can do.
|
