Double column responsive problem

I’m using the Marvel theme and I’m not sure what I’m doing with the double column. When it looks good on my MBP with two columns with the right looking padding and margins, it looks terrible because it goes into skinny mode in the responsive mode on my mobile screens - the text paragraphs are way too skinny - massive margins. When I get ride of the double column padding and margins it then looks perfect on my mobile screens, but then also turns into a monster and takes over the whole screen on my MBP.

On my site linked here I have the two home pages showing the comparison: 1. the home page that looks good on my MBP and not my mobile, and (2) the page (copy) of the home page that looks only good on my mobile phone and not on my MBP. Does anyone know what I clearly don’t know? How can I make it look good on both size screens? Thanks so much Russ

I didn’t leave my website link:

As you are using the built-in column stack (I think), you just need to tell the stacks to “stack the columns”, see the settings below.

Note, that this is in Stacks 4, might be different or not supported in v3…

Let me know how you get on.

Thanks but no that isn’t the problem.

I have the Two Column “Stack Column” setting in RW set correctly, with the mobile set to no double column, and the tablet and computer to double column. This was set correctly.

Basically the margins and the padding with double columns that looks right on a computer screen when on a mobile make the single column so narrow with so few words per line that it comes out looking ridiculous (one column on mobile).

This is it in a nutshell. I get one of these two resultes no matter what I’ve done:

  1. The correct looking number of words per line on a computer screen and ridiculous, one, two, three words per line on a mobile screen.

  2. Way too many words per line on the computer screen W/ the correct looking number of words per line on the mobile.

I would expect RW8’s responsive mode built into the code to correct this problem and make the needed adjustments to that it looks right on a mobile. How can they have double column software not suitable for both mobile and computer screens after this many years?

I was going to attach screen shots and explain a little clearer the problem with the double column stack, but I do not see any attachment button here.

If someone goes to my site with a mobile browser and a computer and go to both the home pages will show what is going on. It’s a real big problem that makes my site a no-go.

Thanks Russ

Doesn’t make sense to me. Your site does not respond the way it should but I have just done a test in Marvel and don’t have these issues at all: Marvel Test Site. If you want to send me a project file I’d be happy to take a look.

Looking at the source I think you have added 40px margins to left and right - you don’t need to do this; it will always look hopeless on small screens. Use the theme’s built in max-width and the columns built-in gutter settings. this will give you all you need. No theme will automatically reduce your margins based on screen size - you would need to create seperate instances for different screen sizes. However, this is not necessary.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.