Responsive viewing of the Newspaper theme

I’ve been working with the Newspaper theme with a Magazine-front page. I added a Revolution slider at the top with a stock ticker widget (http://tdhedge.meta-morphos.es/). I added a few lines of CSS to adjust the margins of the slider, but otherwise used settings available within the Visual Composer and Theme Panel. The home page displays fine on my desktop monitor, but it’s jumbled when I view it on a mobile phone. It in fact crashes the Safari mobile browser 50% of the time.

To troubleshoot the problem I installed a new WP with new a demo install of Newspaper and tried to make only the most minimal adjustments to arrive at a similar design result. This included the Revolution slider but not the stock ticker widget in the right column.

The second build (http://newstest.meta-morphos.es/) has a slightly better result, but still doesn’t appear to be smoothly responsive. Could someone view my test pages and provide some suggestions for a fix?

The primary change from stock version of the Newspaper theme was a Revolution slider at 200px high, which replaced the built-in slider on the Magazine home page.

Is there an ideal combination of settings on the Revo slider, that make it most friendly to the adjustments required when the site is viewed in responsive mobile phone mode?

Thank you

Catalin,
Thank you for your reply. I’m not sure that I understand your comment concerning not being able to compare the two sites?
On my laptop and external monitor the http://newstest.meta-morphos.es/ home page looks the same when the mobile plugin is turned on or off. The only difference I see is when I view the site from my mobile phone. The mobile plugin reduces the front page to a vertical stack of scrolling blocks.

I’ve now removed all CSS fron the ‘newstest’ site and only have the Visual Composer and Slider Revolution plugins activated. The one customization is that I replaced the original top left column block with one Revolution slider block. One a large monitor the front page looks AOK and displays the same on Firefox and Chrome. When I view it on the mobile phone it almost displays correctly but the left margin is shifted left and crops off some of the text. The right column doesn’t display well.

It appears that one solution is to use it with this one customization and with the mobile plugin turned on. On mobile viewing it abbreviates the front page content but at least displays a usable vertical scrolling stack of info blocks.

Is it possible to turn off the Magazine themes default effort to transform the standard site into a responsive version?

That is, to have the complete site page (without mobile plugin) displayed on mobile screens and simply scaled down to fit the mobile or tablet window? I have this option with a framework theme and the mini display of the complete web page works fine. One simply zooms in to select the menu or view areas of the page.(Please see; http://www.kaufmanndesign.com)

This would provide a simple solution for several issues. The pages could still handle iframes, and there would be no surprises for any pages customized with CSS. If a page look good on a normal screen, then it would look fine on a mobile screen. Maybe this setting option is somewhere in the theme settings?

It’s a bit of a surprise that with 50+ Visual Composer elements and blocks as standard tools on the Newspaper theme that it’s not possible to shift a few around without breaking the theme. In the Magazine/Newspaper theme, is it primarily the first top left column block that’s critical to hold the page together as originally intended?

Thanks, Lon K

Hi

Your layout issues are related with the custom css used.
You added a fixed value the width of td-outer-wrap container which breaks the mobile layout, check this screen: http://screencast.com/t/fJ4GsKMuus Use media queries to change that value for mobiles: http://screencast.com/t/1o8RKZmED

@media (max-width: 768px){
.td-boxed-layout #td-outer-wrap {
width:100%
}
}

You also need to remove this margin left added on this row: http://screencast.com/t/kcb6BupP12

@media (max-width: 768px){
.vc_row.vc_row-flex{
margin-left: 0px !important;
}
}

Thanks!

It appears that its difficult to setup one one site layout that is satisfying when viewed on both standard monitor and mobile. So I understand the mobile theme is an option.

Is it possible to turn off the Newspaper-Magazine themes default effort to transform the standard site into a responsive version?

That is, to have the complete site page (without mobile plugin) displayed on mobile screens as simply a scaled down version of the standard layout for large monitors? The ‘pre-responsive’ viewing of a website.

I have this option with a framework theme and the mini display of the complete web page works fine. One simply zooms in to select the menu or view areas of the page.(Please see; http://www.kaufmanndesign.com)