Responsive Design?

[capodanno]

I’m needing to learn more about responsive design. I believed X to be a theme that would do lots of this work for me, but it’s not. I’m needing some help to find out what I’m doing wrong. I have used X previously on other sites, and didn’t encounter these layout issues at smaller screen sizes. For example, www.summerwindcanines.com was a successful design, using X.

But my current project is a mess at small screen sizes, and need your help to figure out what is wrong. For example, if you look at my home page, I can see a few issues, such as:

Under the CTA, there are 3 columns.

1. I would have expected these to be 3 wide on a desktop and on mobile to realign themselves to 1 column wide, with the left one on top, the center one second, and the right one last.
2. The buttons are not resizing
3. The button text changes from centered to left alignment

Under those 3 columns, there are 4 boxes (2 cols of 2 flipping cards):

1. These are also not realigning into a single column.
2. The text is not resizing to fit as things get smaller

The Newsletter subscription box:

1. This form is set to align to the right side of the page, but when the screen gets small enough, it’s switching to left alignment.

On a less complicated page https://caps.visualspring.net/calibration/

1. I’m noticing there’s no margin at mobile sizes.

These are a few examples of what I need to fix, or otherwise learn what I’m doing wrong. If you can point me in the right direction, I would appreciate it!

[christian]

Hey @capodanno,

Our themes are responsive so it will do most parts of responsive design automatically. I say most parts because in some areas, the theme needs the design decision of the user. Provided you know how to use the theme options and most importantly, the builder elements, you will have no problem with mobile screens.

Checking your site, I don’t see the issues you described except for the “no margin” issue on your other site. What I noticed when resizing the page is, your page is slow to “respond” to the size of the screen and maybe this effect sticks on your end. The cause of this is images that are not optimized. That means mainly, the image file sizes are huge.

###Under the CTA, there are 3 columns.
####1. Columns are stacking on the mobile view. The screenshots below show the stacking.

####I can’t replicate 2 and 3. I also don’t see flipping cards on your page.

###Regarding the “no margin” issue.

It’s because none of your Section, Row or Column has side margins or paddings. They are just contained by a maximum width on desktop and if the screen gets below the max width, you’ll be left with full width content because you didn’t set side margins or paddings. Please set the Left and Right margin or padding either in your Section, Row or Column.

Hope that helps.

[capodanno]

That is the successfully designed site I mentioned. The site with the problems is caps.visualspring.net.

Please take a close look at my concern again. Thank you.

[ruenel]

Hello @capodanno,

Are you referring this section?

You may need to redesign your section by using empty columns and hide the columns in smaller screens. You can show/hide the columns by utilizing the “Hide During Breakpoints” options. You may need to check this out:

• https://theme.co/docs/hide-or-show-content-by-device-size

By the way, how should the smaller screen

[capodanno]

I’ve figured out most of these issues myself. But I could still use your help with one thing. Take a look at this page: http://caps.visualspring.net/aha-heartsaver-first-aid-cpr-aed/

I have added a 5% margin to all sections on this page. The mobile preview in cornerstone looks correct, but please take a look at the screenshot from my iPhone 6s. You’ll see that the padding isn’t working correctly for the text in section 2 (it’s streaming off the right hand side of the screen).

Please help me fix this.

[capodanno]

Well, I figured this out by myself too! The problem was the email link within the text. When I remove that link, everything aligns properly on mobile. No idea WHY, but that was the problem!

[ruenel]

Hello @capodanno,

You may have added a broken email link which may have caused the issue. We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.