I've encountered an issue while working on a multi-locale project using the same CSS for all locales (48 in total). In some locales, the position of a div is automatically changing. How can I address this problem?
For example: en_gb and de_de are displaying correctly, but sv_se locale is causing the div's position to be different.
1. Screenshots for en_gb:
https://i.sstatic.net/JZh53.png
- Screenshot for sv_se:
https://i.sstatic.net/uGVS8.png
@media only screen and (max-width: 920px) {
.blahyear,
.termscondition,
.privacy,
.generaldata {
padding:0% 5% 2% 7%;
}
}
@media only screen and (max-width: 415px) {
.blahyear{margin-top: 97px;;}
.privacy{margin-top: -139px;}
.generaldata{margin-top: -101px;}
.termscondition{margin-top: 136px;
margin-left: -162px;}
.footerNav{ margin-top: 20px;}
}<div class="footerText footerNav">
<ul id="footer_ul">
<li class="blahyear"><a (click)="reloadIfSamePage($event);" id="blah" i18n="@@blahblah">blah-blah {{showYear}}</a></li>
<li class="termscondition"><a (click)="reloadIfSamePage($event);" id="footerTerms" i18n="@@terms_conditions">TERMS AND CONDITIONS</a></li>
<li class="privacy"><a (click)="reloadIfSamePage($event);" i18n="@@information_privacy">YOUR INFORMATION AND PRIVACY</a></li>
<li class="generaldata"><a (click)="reloadIfSamePage($event);" i18n="@@data_protection">GENERAL DATA PROTECTION REGULATION</a></li>
</ul>
</div>