We are currently having an issue with custom CSS in Custom Code -> Advanced CSS.
We are changing the following styles based on breakpoints, in order to resize the logo and ad banner:
.td-header-sp-recs
.td-header-sp-logo
.td-main-logo .td-retina-version
.td-header-sp-logo img
Everything works normally, but there is one problem.
The breakpoints seem to be ignored when the window is exactly 1018 pixels wide.
At 1017, the 768px – 1018px CSS is applied correctly.
At 1019, the 1019px – 1140px CSS is applied correctly.
But at 1018, neither CSS is applied. It reverts back to the ‘default’ CSS.
I’d like to send you either screenshots or URL to better explain what is happening, but I don’t want to put either of those in a public ticket.
We have added new breakpoints in the past with no luck. Just tried again, this time with screenshots to show you what is going on. Dimensions are in upper right:
1150px wide, looks good:
1151px wide, reverts to prior style:
1152px wide, looks good:
Code specifically says 1151px, and all styles are !important, but still get overwritten
Any ideas?
Hello,
There is also the js to consider. Not only the css works with breakpoints. Our theme also has js loaded elements. If you alter the js, there is another step to be taken as the theme uses the min js version so any change to the js will require you to minify the js file after the change and replace the tagdiv min js code with the new modified version and minifed of course.
Thank you!
