Need basic design advice, especially about independent positioning

#1

I am trying to understand not only Blocs but responsive design in general. For example, I have placed an ICON in my footer to allow the user to switch site language from Japanese to English. The ICON looks best LEFT-ALIGNED in DESKTOP and TABLET views, but it really ought to be CENTERED in the iPHONE view. You can see what I mean in this short screencast (no sound, “unlisted” YouTube video):

But if I Center the ICON, it fixes it in iPHONE view but it looks oddly positioned in DESKTOP and TABLET views!

This is just one example of many I can think of where you would to reposition things based on browser width. But since all 3 views are tied together, moving or aligning content in one view does the same in other views too. How can I make changes independently of views? If I cannot do that, then how does every other Blocs user get control to look right in all 3 views?

Thank you.

#2

I will attempt to answer my own question…

It would see that we need to duplicate existing content, then click on Visibility on the right sidebar. So I would have my original “row” Visibility ENABLED when viewing on in Desktop & Tablet views, but DISABLE it for the MOBILE view. And then I would select my duplicate row and DISABLE Visibility for Desktop & Tablet but ENABLE Visibility for MOBILE. Then I can independently edit content for various views, although the design area gets a little messy when doing that.

I still can’t figure out what that rightmost “eyeball” icon is for though. It sits to the right of Desktop, Tablet and Mobile icons in the right sidebar under Visibility. I thought it would make the selected content vanish from the design view (making it cleaner), but that doesn’t happen. Is this a bug in 2.4b3?

Speaking of possible bugs, I am unsure why alignment is so inconsistent in design view versus browser preview and why Header-tabbed box content differs in alignment from A-tabbed boxes. This is shown in my screenshot here:

AlignementStrangeness.png3645×2852 194 KB

#3

@JDW go to the preview you like, so the iPhone view, click on your language logo, and make a own class for it, call it lets say: language-logo from now on you are free to do with this logo in iPhone view, so you can center it or move it more up or down in the class manager, if you switch to desktop mode the standart css rules of blocs are active ( unless you create a new class for it :smiley: ) the class manager rocks, and you can finetune almost everything.

#4

Sandy always knows these kind of tricks.
Well done Sandy.

#5

Sandy, I’m afraid I simply do not understand what you mean. Here’s a screencast (no sound) that illustrates my complete and utter confusion about what you mean:

Also note there may be a bug at work too. I am using 2.4b3. When I type a new class in MOBILE view and hit return, the Class field is empty. But then when I switch to another view, the class appears, and when I switch back to MOBILE, the class is there. Clearly this is a refresh bug, Norm.

I look forward to hearing a more detailed explanation about how that “class trick” really works to achieve what I want.

Thanks.

#6

Build 4 address numerous class field bugs. But Still more to come. On a side not I will be releasing a set of videos very soon that explains the basics on custom classes, subclassing and other class related info.

#7

Try this:

  1. New document.
  2. Click on Empty Page.
  3. Ensure your Blocs window width takes up the entire screen width on a MacBook or more than half the screen width on an iMac.
  4. Click in Dynamic body area.
  5. Articles > Styled > click the one at the far left with Apple Watch.
  6. Slowly decrease the width of the Blocs window and watch how the pic resizes in proportion to the text at right. Note that the pic is never significantly smaller in height than the height of the text block (measured from “Feature title” to the Watch Demo button).
  7. Option-CMD-B to preview in Safari (or Chrome/FireFox/Opera — they all look the same).
  8. Resize the width of your Safari browser window and watch as the pic shrinks while your text size stays roughly the same. Note that at the point just before the text drops below the pic (just before the Mobile breakpoint), the pic is quite small in height relative to the height of the text block at right and looks rather odd.

Two questions:

  1. Why does the pic shrink differently within Blocs versus Safari/Chrome/FF/Opera? (Again, the pic shrinks more nicely within Blocs than it does in a Mac browser for some reason.)

  2. How can I use Blocs to fine tune how pics shrink as the browser window width decreases?

#8

you need to EDIT the class, in the class manager, just tested it works

#9

I am aware of Class Manager but I am unable to get the icon to center.

Would you happen to have a screencast that clarifies that procedure?
If not, could you post a sample document I could examine?

Thanks.