Custom class not applied to other breakpoints

I Need Help
1

Screen%20shot%20small
Screen shot small.jpg3440×1988 861 KB
Screen%20shot%20x%20small
Screen shot x small.jpg3452×1966 790 KB
Screen%20shot%20desktop%20
Screen shot desktop .jpg3468×1974 1.29 MB
Screen%20shot%20medium
Screen shot medium.jpg3442×1956 1.09 MB
I first created a custom class in mobile view to make the input fields transparent and to have a field box shadow. When I looked at the other views the name of the class was applied but not the settings. View in browser mode at the mobile site size shows the applied parameters but in all other sizes no settings have been applied.

I read that you can adjust a custom class in each breakpoint but I assumed that a custom class is applied once - the reason for a custom class.

I am running 3.0.7 / 10.14.1 OSX

What am I missing?

Thanks in advance.

Rich

2

Hi @etdronehome / Rich
If you create a class with settings in the LG (widest) breakpoint it will keep that all the way down to the XS breakpoint.
But not the other way around.
It will keep settings down from the BP you start from and downwards.
I hope it made some sence :thinking:

Cheers / Johny

2 Likes
3

Thanks Jackerlund

So a custom breakpoint made at the largest breakpoint remains in effect until it encounters the “same class” modified at a smaller breakpoint?

So much for “mobile first design”

Rich

1 Like
4

I think the point is that you are supposed to start with the mobile first while designing.

5

Hi Rich,

I agree that at the moment it is not always consistent with ‘mobile first’ approach. Some things like padding, margins, offset, etc are always mobile first, but when it comes to complex editing in custom classes, I would still recommend starting with a desktop view.

I design everything in desktop view, and when I have to alight something for all breakpoints, I just switch to XS and align that.

Cheers,
Eldar

6

Before using Blocs I worked with Foundation, which encourages you to take a mobile first approach by always placing mobile options at the front. These are obligatory and automatically inherited at larger sizes unless specifically changed. Should Blocs take the same approach? The order in Blocs is back to front from a graphical perspective.

7

Flashman
I appreciate your comments. What do you mean - Blocs is back to front from a graphical perspective?
Rich

8

Simply that when you open Blocs you are presented with the desktop view first from left to right. This then continues in project settings and it seems to be set up in a way that encourages you to work on desktop settings first, whereas Foundation puts mobile first and makes that compulsory. Everything that follows is optional. It’s more comfortable working in desktop mode, but goes against the mobile first approach.

1 Like
9

I would sat that Foundation and Bootstrap both adhere to the principle of mobile first but this is not always obvious or translated to apps that create web sites or how users use it.

Most people design at the desktop level allowing for smaller screens in the process, and then adjust for smaller screens which is more or a Desktop first but adjust for mobile afterwards approach.

Where the mobile first is pretty well defined is that what you set something for small mobile (XS), this sexting gets used for all screens bigger than XS, unless this is changed.

So if you set something for XS and then different behaviour for MD, XS and SM will use the XS settings, and MD and LG will use the MD settings.

Therefore I would say that if what Jakerlund is correct, this is the opposite behaviour and not consistent with the rest of Blocs. Maybe @norm could explain a bit more as this needs to be understood fully.

10

I would say designing from mobile to desktop is the way to go.
Google now uses the mobile version on most sites to rank and at least 50% of visitors are using their mobile device to view a page.

11

Interesting discussion. I’ve always been more comfortable starting with the desktop version, then tablet and then mobile.

I think the main reason I work like this is that my mobile content is almost always a subset of the desktop and it feels easier to edit content down than expand it.

Of course, none of this matters much if you use a design program to mockup a site (and it’s variants) before using blocsapp. Blocsapp is so easy to use that I suspect many people here don’t use a design program to mockup the site first. I completely get that.

I suspect I’m not alone in the desktop-first feeling, but that goes against the prevailing wind so not so many people speak up.

1 Like