Hello @elisabau,
Thanks for writing in!
I am seeing this:
Be advised that 200 items are a lot of data which will cause problems loading the page. It sometimes overwhelms your server which may be the reason why it triggers an issue “A problem has occurred repeatedly”. I haven’t encountered this though. When I checked the page on my android phone, it display as fine.
On the Services page, please keep the “Count” of your Looper to at least 6 (8 or 12) items only since you only have a few items to display. And also your custom CSS is causing a problem.
.service-team.service-team-6 .x-col {
flex-basis: calc(16.666666666666667% - 1em) !important
}
@media screen and (max-width: 1200px) {
.service-team.service-team-6 .x-col {
flex-basis:calc(33.333% - 1em) !important
}
}
@media screen and (max-width: 600px) {
.service-team.service-team-6 .x-col {
flex-basis:calc(50% - 1em) !important
}
}
.service-team.service-team-5 .x-col {
flex-basis: calc(20% - 1em) !important
}
@media screen and (max-width: 1200px) {
.service-team.service-team-5 .x-col {
flex-basis:calc(33.333% - 1em) !important
}
}
@media screen and (max-width: 600px) {
.service-team.service-team-5 .x-col {
flex-basis:calc(50% - 1em) !important
}
}
.service-team.service-team-4 .x-col {
flex-basis: calc(25% - 1em) !important
}
@media screen and (max-width: 1200px) {
.service-team.service-team-4 .x-col {
flex-basis:calc(33.333% - 1em) !important
}
}
@media screen and (max-width: 600px) {
.service-team.service-team-4 .x-col {
flex-basis:calc(50% - 1em) !important
}
}
.service-team.service-team-3 .x-col {
flex-basis: calc(33.33% - 1em) !important
}
@media screen and (max-width: 600px) {
.service-team.service-team-3 .x-col {
flex-basis:calc(50% - 1em) !important
}
}
.section-service {
padding: 0 !important;
max-width: 1600px;
margin: 0 auto !important
}
.section-service>.x-container.x-row {
max-width: 1600px
}
.section-service .x-row-inner {
flex-direction: row;
justify-content: flex-start !important;
align-items: center !important
}
.section-service .x-col {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start
}
Please remove this custom CSS and use the built-in Flexbox settings of the Row element and Column elements. You can also apply Responsive Styling to these elements without writing any single code. In fact, your current layout may be done with the same layout with no CSS. Take a look at the example in the secure note below.
As for the Teams page, again, this is using custom CSS and it is causing an issue on smaller screens. It is best that you contact the creator of the CSS to troubleshoot the issue on why some images or text gets hidden.
Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.
Best Regards.
