Stupid Question… How can I make grid into stacked content in mobile

I know it’s something simple… right now everything is shrinking for mobile and has two columns…

Thank you!

Tried chat gpt- it suggested looking for breakpoint setting - will investigate :slight_smile:

In the preview window, change your view to the smallest one. Set the Grid component to be 1 column. Then change your view to a larger view where you want more columns, and click the little circle to the left of the number of columns. It will turn blue, then set to the number of columns you want at that size.

1 Like

@MichaelDroste

the blue dots control the breakpoint changes, I just set two cols for ease in video, you can change at every breakpoint. lots of the controls have breakpoint blue dots

1 Like

Thank You Very Much - I understand now

Does this need to be done for every single element on a page for every break point?

I’m finding it difficult at the moment designing a page how I like it and then having to click the little blue button at every ‘device’ and set the size accordingly

Despite mobile being the most used device to access websites these days, I’m still annoyed at having to design at the ‘mobile’ size first and adjusting everything up to 6 times depending on break point

I’m new to Elements so maybe I’ve missed something, but there has to be an easier route surely?

Thanks

You do not need to design at mobile first, design at desktop then decide how you would like the page to look at different screen sizes
Design at md and work from there it’s actually up to you how you design the site

Say you only want 3 screen sizes phone pad and desktop design for that

You can skip breakpoint, the skipped breakpoints inherit the one lower(before)

Does not need to be done for every component only the ones you want to look different

“every single element”? Probably not, in my experience. But the more you want horizontal arrays of things across the desktop site, then yes, the more you’ll be clicking the blue icon for the smaller page sizes.

“having to design at the mobile size first” I’m not a fan of this. The reason why a number of folk start there is because of Google’s weighting for whether a Web site works in mobile or not. The idea is “if I design at mobile I won’t step on any Google edict that kills my SEO.” I believe that can be managed even if you start designing at full desktop size. But it may involve a blue icon ;~).

As upssjw noted, I’m not sure you need six sizes. I basically target phone, tablet, and full desktop, so three sizes. In doing so, I find the biggest thing I’m changing from the desktop size on the tablet size is font sizing and weight. It’s only on the phone that I sometimes have to collapse rows into stacked bits.

example, not finished just messing with layouts at the moment I started at desktop, checked lower screen widths only changed mobile so far

I asked chat gpt traffic statistics…
60% is mobile and about 40% is desktops…

Even if you design at desktop and make sure you have changed where required at the right breakpoints not sure how google knows, long as your screen screen sizes work, unless I’m wrong and maybe I am, not sure Elements declares this was designed at desktop first and not mobile

expect as long as responsive and user friendly