-
Posts
-
Hello.
Here is the website we have an issue with: https://tourthefairfax.com
Please look at it with Safari to see the issue more vividly.
At the top of the home page we have Advanced Layerslider. Below a Grid Row with 3 columns. The right column has an offset of negative top margin (margin-top:-40px;). So the right column visually lays over Advanced Layerslider above it. We also had to increase z-index of that right column so it would appear over the Layerslider.
Full custom css for the right column:
.sp_top_grid_right .flex_cell_inner {
margin-top: -40px;
padding: 30px;
z-index: 998;
background: #fff;
}
You can see that all the text in the right column looks lighter than the text in the left or middle column.
Try to change the margin-top for .sp_top_grid_right .flex_cell_inner to “0” in your inspector to see font turning to “heavier” normal font.
It drives me crazy!
Please let me know how can we fix it.
Thank you!We applied some styles to the slider:
.ls-layers, .ls-slide-backgrounds, .ls-slide-effects, .ls-background-videos, .ls-bg-video-overlay {
-o-transform: none !important;
-ms-transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
}
And it helped a little bit. But you can still see the transform (font weight) are being changed between slides transitions.Hi,
I compared your site between Chrome and Safari but I can’t see any differences in font size, you have a lot of different font sizes going on there so I’m not sure I understand exactly what the problem is. Could you try to explain a bit further and post a screenshot of the issue please?
Best regards,
RikardHey, Rikard.
Please take a look at the screenshot I took in Safari:
https://files.fm/u/5xmbmsmq
Fonts in the left and the right boxes I highlighted with red border are identical but they look slightly different. The text in the right box looks slightly lighter in weight.
And I believe the layerslider that above it somehow affects it.
Open an inspector and find
.sp_top_grid_right .flex_cell_inner {
margin-top: -40px;
padding: 30px;
z-index: 998;
background: #fff;
}
Try to change margin-top: -40px; to margin-top: 0; and you’ll see how the text in the right column will change to slightly heavier and will match the text in the left column.Hi,
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
Basilis
- You must be logged in to reply to this topic.