Stacked Columns

Classic General
1

Hello
Unfortunately Stacked Columns no longer works on the iPhone 11 and 12 Pro Max. And a two-column layout on a smartphone just looks terrible. What can I do? CSS code?

Example: http://www.klausheer.ch/page167/page-121/page-142/page416.html

Regards
Andy

2

The reasons Stack’s built-in 2-Column stack does not stack the columns on those two devices is because they have larger screens than many mobile phones. The 2-Column stack is designed to stack columns when the screen is < 400px wide. Those devices are 414px wide.

The best thing to do is to use a 3rd party “columns” stack that either has a wider definition for mobile or allows you to set the pixel width for the break point (width is switches from one layout to another). There are a lot of options out there.

Btw, you may want to name your page’s folder something more descriptive than the default “page-XXX”.

2 Likes
3

Thx a lot Don

That may be. But longer words are cut off mercilessly at even this pixel width. I wish I could define the minimum pixel width.

Regards
Andy

4

You are right about the folder description. When I have time, I will describe the approx. 300 pages more clearly (even if the user doesn’t really care ;-).

5

It can influence search results, if you depend on them for traffic.

6

This should work to make those larger devices (up to 420px in screen width) act more like the smaller screens. I only tested it on that one page, so you may have other issues on other pages, so please test your site throughly after implementing it. I only made the columns stack and took away/ reduced the padding around them.

You can place this in the site-wide CSS code.

@media only screen and (max-width: 420px) {
    section.theme {
        padding: 0 !important;
    }
    section.theme main {
        padding: 15px !important;
    }
	.s3_row  {
		margin: -10px 0 !important;
	}
	.s3_column {
		padding: 10px 0 !important;
		width:100% !important;
	}
}
1 Like
7

Don, you are the greatest! It works. All thumbs up. Still, I have to criticize RapidWeaver. Because I chose this application because I am a designer, not a programmer. As soon as I have to change something in the code it is not in the inventor’s sense.

Thank you Don and Merry Christmas
Andy

8

In all fairness, this isn’t really a RW coding problem.

All stacks are different depending on the developer that wrote them. Some will give the ability to choose different pixel widths for column breakpoints and others will work on popular/default widths and no option to change.

The beauty of RW is having the ability to fine tune the stacks by adding a bit of CSS code. Just like a car, you can drive it but if you want, you can get dirty in the engine.

RW is the foundation, stacks are your bricks and CSS is the roof. Together, they will build the house.

3 Likes
9

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