I have a site that I am building
https://azalea-fiddle-5ha9.squarespace.com/
pwd: USTAX2024
On desktop, my site is fine, but when I view in mobile, the section the title THE SOLUTION is appearing before THE PROBLEM. This should not be the case. On the desktop site, the order is fine, but on mobile it is switching up. How can I fix this?
This is what I have tried to add as Custom CSS to no avail:
@media (max-width: 600px) {
#yui_3_17_2_1_1727035450177_100 {
display: flex !important;
flex-direction: column-reverse !important;
}
}
8
At this point flex-direction: column-reverse will be not best solution cause there are more then only those 2 items.
So i would go more like
@media(max-width: 600px)
{
.customcontainer
{
display: flex;
flex-direction: column;
}
.customcontainer > *
{
/* preserver rest of childrens after title and subtitle */
order: 3;
}
/* make title first */
.customcontainer > .custom-title
{
order: 1;
}
/* make subtitle second */
.customcontainer > .custom-subtitle-order
{
order: 2;
}
}
====================
Edit:
Theres a issue that this class is rendered dynamicaly (looks like its generated by and framework like vue, angular, react or something like this)
At this point we cannot use those id’s/classes that are dynamically rendered each reload.
To style those elements you have to add an hardcoded class’es to keep styling.
3