I am using the stackable responsive feature and changing font sizes and margins according to mobile, tablet, or desktop. For certain blocks, I am also doing separate ones for each device because it looks the best that way. My website looks perfect on all of these devices, however, between devices it looks really bad. Like if I want to turn my mobile horizontally for example it looks all wonky or when narrowing my screen size on desktop… How can I prevent that?
Is there a way to control what shows between devices or device sizes?
https://empower.sheindykarniol.com/
Any help would be greatly appreciated!!
Cusom css would probably be the best way.
I also found that when I added spacers between blocks it helped (not sure why, but it did)
Best of luck!
I haven’t used Stackable. I use Bootstrap all the time, but I think they are all similar in that there shouldn’t be gaps between size ranges. I understand if you are targeting very specific devices, like iphone 6 vs. iphone 10, that you would have gaps, because it’s very particular. But in general most of what you do should work well across a couple hundred pixels, and if you need to for something specific you can tweak it manually. It shouldn’t be necessary to target specific devices so often.
For example, in Bootstrap, there is an xs screen that is up to 575px, then a small screen is up to 767, md up to 991, lg up to 1199, and xl is anything wider than that. Most of what you do should be geared to work across the full range for each screen size. If, for example, you find that because you geared some design to a regular mobile size which is in the low-mid 400’s in width, and for 575px it looks totally off, so make your own media queries in your css file. But this should not be necessary too often. In general, you should be able to work within the standard widths.
Good luck!
By the way, I noticed that unchecking the below (see screenshot) fixes the issue with your headline not showing on a horizontal phone.
Sheindy, can you give a specific spot to look at? Adding a lot of separate elements is definitely not ideal.
Thanks, everyone for your replies. So in Stackable, you have three different devices to build for - desktop tablet and mobile. Some sections I did a separate block for each one.
See for example
In the about us page
The last section of partner organizations veers to the left between mobile and tablet and it should really be in the center.
Another example is on the home page the columns of our services looks great on all devices However it looks wrong when the mobile is horizontal. Is this normal? is this ok or do I have to correct problems like these?
Thanks a lot!!
@Sheindy_Karniol, you have a float:left on each of those partner logos. It can be removed and that solves that problem.
As far as the homepage and any other issues like this, it’s worth it to try to make it look right at all sizes, especially as there are new devices coming out all the time that are not typical sizes.
Thanks so much! indeed I had a float left from a custom CSS animation that I did. Thanks for pointing that out!
@Sheindy_Karniol Not sure if you are still working on this, but I wanted to mention a few points that can help with responsive design.
-
Try to nest blocks as little as possible. Ie, if you can avoid it, don’t put columns in columns or groups in columns in groups, etc. The more deeply nested your blocks are, the more difficult it is to detangle it for responsive design. Columns should mostly go automatically and not need to be tinkered with, which is why I’m wondering if you’re saying columns are an issue, they may be deeply nested.
-
When your theme/page builder/block library has set viewports, it is helpful to know how their media queries are set, if it’s max/min, and what those numbers are. (Sometimes you can find this with element inspector, or by checking docs, or asking support.) For example, let’s say Stackable is mobile-first. Their “mobile” display affects all screen sizes under 600px. Tablets are anything under 1024px. And desktop is anything bigger than 1024px.
If you look at it that way, where what you’re doing for tablets affects *everything * between 600 - 1024, then you need to make sure whatever you do looks good at both those sizes, erring on the simpler end. So even if, let’s say, an element looks good with 4em padding on desktop, and through around 800px and then it looks too large, you’d stick with the amount of padding that looks good at 600px.
I’m not sure if that is helpful or too vague. 
Hi Penina, thanks a lot for your help, I’ll try using your ideas.
Still struggling with my services page - Services – Empower!
not sure how to make that responsive because when I narrow the screen the images become smaller… want it to be symmetrical. Is there any way to do this?