HELP...Padding is different from blocs to devices -- SOLVED

[DanielF]

Hi - I’m really struggling with getting this problem solved.

The padding on an h1 element (GROWTH & HEALING) which is controlled by a custom class, when viewed in Blocs looks very different than when viewed in a browser and on a mobile device.

[images below].

Why such a big difference? What I see in blocs preview is closer to what I want it to be on a mobile phone, though approximatley 40px lower on the screen, but not as much as what is actually rendered on the iPhone Xscreen capture.

I also notices something strange for this bloc in the Layer Tree: there are two containers. Is this normal, or is it perhaps contributing to my padding problem??

THANKS!

[hendon52]

It looks like you’re using some sort of hero bloc that is set to full screen. This shouldn’t really need any padding adjustment to the elements because the bloc is designed to place the heading elements in the middle of the device screen. Clearly this will appear to change the amount of padding depending on the height of individual screens.

The containers you are seeing are really for positioning. The main text container is what is keeping the H1 and H2 brics centred in the middle of the screen. Likewise, there is usually a navigation element at the top of the screen in it’s own container (usually named Nav Bar). This too is used to position the navigation elements at the top of the screen. The nav Bar usually has another container nested within it called the Nav Container - this is to hold the actual navigation links. There is also an additional div container that holds the Lets get started Link, nested in the main text container, again to ensure that it is positioned correctly on the screen.

Wherever possible, you should try not to make adjustments to any of these things. If your text elements don’t look correct on mobiles, its more likely to do with text size when it wraps to a couple of lines. Its best to make an adjustment to the text size itself on the mobile variant until it looks a little better. Once you start adding padding to the text container, you effectively make the container larger which pushes the text further down the screen. Furthermore, if you make the padding adjustment on the desktop version, it will normally adjust it on all device variants until you go into each device variant and make further individual adjustments.

Try and keep it simple - let the application do the work of positioning things, particularly in a full screen bloc. If you get text wrapping that you don’t want, adjust the text size itself on each variant.

If you really must move the text element (up or down) within a full screen bloc, its often better to move it using the margin setting rather than the padding. This moves the container, rather than making it larger.

[DanielF]

@hendon52

It looks like you’re using some sort of hero bloc that is set to full screen.

Yes, I am, but I’ve wanted to push & pull the positioning for the h1, h3 and button and then the h4 below, so the positions are different per screen size. (LG & MD, positioned right, SM & XSM, horizontally Centered)

@hendon52

because the bloc is designed to place the heading elements in the middle of the device screen

Wonderful to have this explained, and further evidence (and with gratitude) for what I replied in our other dialogue Carousel Caption Area -- Class Control - #15 by DanielF regarding the creation of a Blocs Book that will explain all of these ‘under the hood’ (i.e. invisible) controlling factors to pre-packaged components. Knowing this would have saved me hours of trying to figure out why what I do (see) in the editor, with Custom Classes, doesn’t then get translated onto the rendered device screen.

@hendon52

. Once you start adding padding to the text container, you effectively make the container larger which pushes the text further down the screen.

Another excellent explanation…something that would be so welcomed in the Blocs Book I envision for folks like me.

@hendon52

Furthermore, if you make the padding adjustment on the desktop version, it will normally adjust it on all device variants until you go into each device variant and make further individual adjustments.

Yes, this one I’ve noticed occurring, and so make sure to check each device size when I make custom changes on any one of them…which of course is a time consuming step.

@hendon52

If you get text wrapping that you don’t want, adjust the text size itself on each variant

another great entry for the Blocs Book…hint hint, maybe you will write one???

@hendon52

If you really must move the text element (up or down) within a full screen bloc, its often better to move it using the margin setting rather than the padding. This moves the container, rather than making it larger.

oh darn, I was doing just the opposite, because I thought the Margin was causing the havoc…again, something I’ve been trying to chase down on my own…so, this is good to know! Much gratitude, to our future author of the Blocs Book: Let’s get under the Hood, edition 1 by @hendon52 .

[DanielF]

hendon52 –

So, I’ve been playing around to gain control of the text/buttons alignments on smaller screens, as indicated in this post, and so I have recreated this same bloc from scratch, but without using the pre-packaged fullscreen bloc.

Changing the text size as suggested above for the mobile device isn’t really the issue, as there is no text wrapping occurring.

With the recreated bloc, using a basic structure to begin with (not the full screen pre-packaged one) I’ve set it up on the desktop okay, but am running into all kinds of problems on each smaller size screen to make the vertical and horizontal positions for the text/buttons as desired.

Additionally, I was able to add a row for the navbar above the text/button row, but then needed to use -180 margin to get the nav to the top of the screen, which causes further challenges.

So, here’s (hopefully) a simple question: for the pre-packaged fullscreen bloc, as originally used in my site, how would you override the ‘vertical-centered-alignment’ of the text/buttons so that I can move those elements higher up on mobile device screens?

In other words, override the pre-package ‘vertical centering’ on the smaller devices only.

It appears an !important class is used for the centering screen-alignement on the text/button elements, which a Custom Classe seems to not be able to override.

These are the kinds of challenges pre-packaged blocs creates when you want to adjust them…

Alternatively, in the recreated bloc shown in the picture below, building it from scratch with the hope that this would provide the most control over both vert/horiz alignment for all elements and on all screen sizes by using custom classes, how would you add the navbar so that it easily aligns to the top?

It doesn’t appear you can add a ‘container’ to separate it from the provided container as shown.

[hendon52]

If I were creating this from scratch and I didn’t want the full screen hero bloc, I would use two bloc elements. The top one would be a navigation bloc (usually in the top global area). As the first item on the page, it would automatically appear at the top of the screen. The next bloc (the hero image, for want of a better description) would better be one of the centred hero blocs. When it is placed on the page, it will be placed at full screen. However, you can change this to say Large. In so doing, Blocs will advise you that the top elements of the bloc will be removed. Because you are creating a separate menu bloc, just have blocs remove it.

You will now have a hero bloc with the heading, subheading and button element already centred horizontally and vertically in the Bloc.

Change your text to whatever and style the button how you like. Add a couple of paragraph brics below the button so you can create the two lines of bottom text.

Align all the elements to the left. Now select the row within the bloc and adjust its width to where you want it by dragging the leftmost offset handle. You should now have everything placed horizontally. Now you need to deal with the spacing between the elements. Select the button and create a custom class. In the class editor go to the metrics tab and select the top AND bottom margins. Then adjust the margin slider to create equal spaces above and below the button. You should now have something that looks like this:

Note: I’ve already placed a navigation bric in the top global area. You may decide to use a different style, but the procedure is the same

Now for final positioning. You will notice that the bloc has resized to fit the contents of the bloc. If you want the bloc to display larger whilst keeping the content vertically centred, select the container element and create another custom class. Again select the top and bottom margin and use the margin slider to increase the height of the bloc. As you increase the height, you will see that the elements remain centred vertically. It should look something like this:

Keep adjusting the container size until the whole bloc is the height you want it. You can now switch to other screen devices and make similar adjustments for each device variant. On portrait tablets and smartphones. it would be better to centre the element on the screen instead of having them offset and left justified.

Now for the background image. Simply apply your background image to both the navigation bloc AND the hero bloc. Make both of them parallax. this will visibly merge the images into a single image. You could also make the navigation block sticky to keep it in view during page scrolling.

[DanielF]

hendon52 – I’m so very grateful for your generous effort with your tutorial(s)…they provide tremendous information revealing how to best manage Blocs.

I need to take some time and really study them so I can truly understand their wisdom…but in the meantime I just wanted to say thank you once again, and I look forward to learning more from you!

Blocs can be both easy to grasp and confounding, too, a fact which seems to reveal itself mostly as you move away from the pre-packaged stuff.

This give me an idea for your future book (lol): 'Blocs Uncovered: an expert peek into the unseen bits’

[DanielF]

Hendon52. –

After playing around with your full suggestion, I realized a simpler solution, drawing directly from your suggestion, which was to only create a custom class for the Container in which the text/button elements live…and then adjust the top/bottom margins for each break point as needed…! And viola, bellissimo (Italian for beautiful)

While your full suggestion is awesome, in my use case scenario, I don’t use the global area for my home page, as I use the global area for my Blog page, so that all subsequent blog post pages it links to share the same top image/nav…which is different than my Home page. Works quite well.

So, leaning is taking place, thanks to your excellent communication skills and knowledge!