Making ticker width responsive on mobile and tablet

Resolved

(@peterlaz)

Thank you for making scrolling text so easy. The plugin is working great so far. However, I have an issue in making the ticker width responsive on mobile phones and tables. My settings for @media screen does not seem to affect the screen width. Here are the details.


@media screen and (max-width: 767px) {
    .mtphr-dnt-tick-contents {
       margin-left: 14% !important; 
       margin-right: 14% !important; 
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mtphr-dnt-tick-contents {
       margin-left: 10% !important; 
       margin-right: 10% !important; 
    }
}

@media screen and (max-width: 1024px) {
    .mtphr-dnt-tick-contents {
       margin-left: 10% !important; 
       margin-right: 10% !important;
    }
}

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author metaphorcreations
(@metaphorcreations)

6 years, 1 month ago

The ticker is responsive by default and should take up 100% width of its parent element.

When I view your site I am seeing the custom margins you have set, but I also see that you have many different media queries at different browser widths that are setting the left & right margin of the ticker contents.

I would suggest removing all of the custom margins and just let the ticker go full width in your browser at all screen sizes. Otherwise, if you want the ticker to be the same width as the content below it you should apply the same css to the ticker as the .wrap divs in your theme at the various browser dimensions.

Thread Starter peterlaz
(@peterlaz)

6 years, 1 month ago

Thank you for the prompt response. Since the plugin is now fully responsive, I will use it with the default settings for the ticker width.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Making ticker width responsive on mobile and tablet’ is closed to new replies.