I am using background photos to add a little colour to a website, currently using Blocs 2.6.5. The images stop scaling down as the width decreases, and thus the depth of the Bloc increases, and so the photo doesn’t work well for the ‘phone’ view. I was hoping that I could either substitute the background photo with a less detailed blurred image, or simply hide it for the phone breakpoint.
My experiments so far have not produced the result I was hoping for. I have selected the bloc, and selected ‘hide’ for the smallest breakpoint, but that hides the entire bloc. I have also tried viewing the site in the smallest breakpoint and deleting the image, but that deletes it for all breakpoints.
Can anyone advise if what I want to do is possible in (Blocs 2 or 3) please? (If so, how?)
Any help appreciated.
Continuing to think about this, I’m wondering if the solution is to have one bloc which is visible for the bigger breakpoints showing the photo, which is set to be hidden at the phone breakpoint, and another bloc with the blurred image which is hidden for the larger breakpoints, but is visible for the phone view… I’m guessing that may work.
Any other ideas welcome!
Hi there,
Option 1
You can indeed duplicate the bloc and adjust it for the smaller breakpoint and make it unvisible for the larger breakpoints and vice versa.
The visibility section would look like this on the samller breakpoint for the duplicated bloc:
Then for that same duplicated bloc the visibility on the larger breakpoint would look like this:
For the orignal bloc the visibility would the exact opposite.
Option 2
Maybe more simple provided you know how to use the custom classes. It to use a custom class and adjust for each breakpoint.
MDS
Thanks for your reply, MDS. While I have used custom classes already, I’m not entirely sure how I could use one here. Can you advise, please?
Hi Frank @Hawkeye
Background-size: contain for the sm breakpoint. You would need to add the styling code in the Page settings.
MDS
Ok, thanks for your help. Will take a look tomorrow morning.
Will see if I can provide you the whole code tomorrow (although quite busy on Monday). Time to go to bed 
MDS
Hi Frank @Hawkeye
Would you share or PM the actual image so I can better evaluate the best solution and thus coding ?
MDS
Let me know if you still need help - like mentioned I would need the pic to provide an adequate solution/code.
MDS
Hi MDS,
Apologies for the delay in replying to your kind offer.
Having tried out the ‘duplicate bloc’ option, that actually works perfectly, and is easy for me to maintain, so if you don’t mind, I’m going to stick with that work-around for now.
note that I have not yet made this alteration live - I have an “Experimenting site” where I try things out, and have been trying it out there for now. You can see, however, how some of the background images become a bit less effective for the likes of a phone screen!
The site, if you’re interested to look, is www.glasgowfa.co.uk
Thanks for your assistance meantime. appreciated.
Hi Frank @Hawkeye
No problem. No offense taken.
Had a look at your test site. Indeed your images with different focus points tend to show much more blur areas on small devices. However, you really need to focus on the images whilst normally you would be on the content text.
Have not looked at the image dimensions and resolution. Best is to have 72 px as resolution for web and make sure they have been optimized.
Good continuation.
MDS
Hi MDS,
Thanks for your comments. Likewise, no offence taken. I appreciate you taking the time to look. I have a lot of updates planned for over the restive period when other work is quieter, most notably re. font and image sizing for smaller devices, and swapping out the background images as previously mentioned.
Re. image sizing, I had thought that 150dpi gave a better result, but you recommend 72, which I suppose will inevitably load faster.
Otherwise, I’m most impressed with the speed at which @Norm is fixing/improving Blocs 3 already! I just downloaded 3.0.7.
Best Wishes for Christmas and 2019 meantime.
Frank
@MDS I made quite a few alterations as mentioned in my last post over the past few weeks to my site www.glasgowfa.co.uk . I found the showing/hiding of blocs quite straightforward for handling removal of background images for smaller devices, and I think the site looks a lot better now than when it was first completed.
I still have lots to learn about Blocs, but it’s a great piece of work, and very enjoyable to use!
Hi Frank @Hawkeye
HNY '19
Indeed, the site has greatly improved. You’re on the right path.
Just 3 little pieces of advice:
-
you ought to have at least your paragraph font size at 16px or 1rem for readability and probably increase font for titles as well (obviously it also depends on the font chosen)
-
you can increase the padding and margin between the elements to give them a little more air to breath (what is called white space)
-
paragraphs should be contained to a maximum of 60-75 characters long in width, just as a newspaper puts two columns instead of a full width row of text, it’s easier to read.
You will probably find in the forum better explanation for white space and width dimensions for paragraphs in terms of of text/characters
The more you use Blocs and learn more stuff the more you get addicted.
MDS
Hi @MDS
Thanks for the advice… appreciated. I’ll follow up on your comments as soon as I can make the time. I’m finding the Forum very useful - a great place to find solutions, and there’s a lot of help available here.
Best wishes,
Frank.
Hi Frank @ Hawkeye
Indeed the forum is very lively.
MDS