Ticker appearance on chrome vs safari

I’m not seeing why, but for some reason your site is rendering the :before & :after psuedo elements differently in different browsers. This could stemming from theme css applied to the site.

Try adding the following custom css to your News Tickers > Settings page to normalize across browsers:

.mtphr-dnt-clearfix:before,
.mtphr-dnt-clearfix:after {
  content: none;
}
.mtphr-dnt-tick-container {
    padding-top: 10px;
}

Hi, that worked well, even for responsive.

Would you mind taking a look at my mobile site. For all pages, except homepage, there seems to be a padding on the left and right(white space) when I swipe on the body of the page. It doesn’t seem to be stable. The screen moves to the left and right on swipe. The same behaviour is not experienced on the homepage.

I am told by my theme editor it’s happening because of the ticker width set to 420px. The ticker width if set to default is not appearing at all, hence it has been set to 420px. Request you to please take a look and let me know a fix.

Hi any update on the above issue with mobile?

Also the news ticker is not full width on large desktops.

Your theme editor is correct and you need to remove the set width of the ticker. The ticker is as wide as the the element it is contained in, but I see on your site the top-bar element is floated left and there are other child elements that are inline-block… So, the ticker isn’t finding a width to use, which is why it’s not showing without a set width.

To get around this, first remove the set width. Then, add the following custom css to the News Tickers > Settings page:

#mtphr-dnt-3207-widget {
  width: 100vw;
}

This will force the ticker to be as wide as the browser width at any size.

Hi, that didn’t resolve the issue.

after adding the above css and removing the 420px ticker width, ticker is a 1-2px ticker appearing in the centre on the top bar.

So I had to change it back.

• This reply was modified 3 years, 9 months ago by brandmadeconsult.

Sorry, I gave you css for the desktop ticker you have running. But you should really remove the static width on both tickers (desktop and mobile), and then add the following css:

#mtphr-dnt-3207-widget,
#mtphr-dnt-2062-widget{
    width: 100vw !important;
}

Thanks that worked like a charm, now I can use the same ticker for both mobile and desktop. Thanks for your awesome support!

• This reply was modified 3 years, 9 months ago by brandmadeconsult.