Fit Image by Height, Mobile Gutters, and Scroll FX BG Issues

[itsTYT]

Hi, hope all are well!

I’ve got 3 issues here

1. I wanted to fit an image by height, to see the whole thing, however, I can only specify a finite numerical value. What I did for now was type out a number that looked reasonable, and then apply that same ratio to the width. I’d like it to just take the size of the device. It’s mostly an issue on mobile where it tried to do the same numerical height.

2. In the Blocs App & Preview, it shows the images properly on XS, however when executing the browser live preview and shrinking or navigating to the html file from my iPhone 14 Pro, I see quite a bit of gutters / unused space on the side. I’ve disabled gutters on all rows and it still occurs. Any assistance on this?

Lastly, and the least important, is

3. On any breakpoint, when scrolling down, scroll FX show the site background, and then the bloc background slides in. It doesn’t look great, and there’s almost no way to make the site background and the bloc background match – because they stack. The only way to have them match would be to just have no bloc background. But then I can’t have different colors on different pages because - AFAIK there is no page specific background? Any solutions here?

Using Blocs 4.5.4

Thank you so much for your time!

Trip

[itsTYT]

Here’s a screenshot of how it appears on the iPhone 14. I like that the full height fits, but I want to reduce the side gutters a bit. Thanks in advance!
Also, I ‘solved’ #3 by just turning off all scroll FX. they were a tad jittery too and sometimes images wouldnt load until you got to that point so by disabling scroll FX I was able to achieve (the appearance of) faster loading

[BAM]

Not sure if I am ‘addressing’ your question but I also had the same problem. I googled and studied all the solutions but what I do and always do is… not a great solution. I hide desktop/iPad options and serve everything to iPhone as different images and styles. The problem is that everything is loaded even if it is hidden.

[itsTYT]

ah shoot. I suppose if it didn’t load that could be effective.

Now that I think about it - this is easily done in HTML with something like width=100% and height=auto or vice versa.

I really need some help here @Norm, not sure if I’ve found a bug here:

If I view the site in XS breakpoint in Blocs it looks fine. (on the actual XS device it does not)
Now if I leave it on the LG breakpoint, enter preview mode and drag the right slider to shrink into XS, the issue is visible.

any recommendations Norm?

To be more concise:

How it should look:

How it actually looks (whether that’s exported and actually viewing it on a phone, or in the browser on the desktop shrunk to mimic XS):

[itsTYT]

Most interestingly, it seems my other site made with blocs @ tripsuniverse.com handles the responsiveness and mobile perfectly. and viewing it in both methods above produces the correct result both ways…so maybe a snag in the other blocs file? so confused…

[itsTYT]

Are you sure? I see it going through the different breakpoints. I tried the responsive design mode in the browser, still the same issue as screenshotted above.

Any solutions to fit an image by height? Without entering a finite number so that it’s locked

[PeteSharp]

Breakpoints work on viewport, so narrowing the preview on LG will show the smaller breakpoints.

Well we don’t have any details about the structure or classes you have applied so it’s difficult to tell from those images because it could be several things.

Eg. A width of 100% is relative to the parent container. What are you column settings on the XS?

[itsTYT]

Thanks for responding!!

The columns are set to full width
Where can we enter 100%? I know you weren’t referring to this field, but essentially if I could enter 100% for the image width instead of a finite pixel number, that would solve this

Otherwise what’s the easiest way to make it fit the width? Either referring to my screenshots or from scratch

Thank you so much for your time! I really have been struggling with this and I’m sure there’s an easy way to do so it’s just eluding me right now!!

[itsTYT]

can I bump? I’ve been asking for help for two weeks and I have a presentation tomorrow. I’m really baffled like this is getting ridiculous…
I posted the question 2 weeks ahead of my presentation and I got almost no help. I thought that would be ample lead time. Is there a purchasers only forum I should be in? Should I DM someone? Maybe I’m an idiot and it’s super simple – that should just make the answer that much faster shouldnt it?

please. help.

[itsTYT]

Jerry, the only solution I’ve seen is to remove ALL elements as shown in LG and re add them as XS only elements, shared by @BAM . I don’t see any other possible reasons / solutions in this thread. Hell, all due respect, but the one thing you had chimed in with ended up being false as noted by @PeteSharp

Baffled mostly at how difficult this common and seemingly simple task is, though also at the lack of response.

I’m happy to share whatever information, I’m happy to add the Blocs project file - just no one asked for it.

I didn’t expect a 2 week lead time to count as urgent - I was sure this would have been sorted out within that time.

And I don’t expect a prompt response from any third party, like you said, not being paid, moreso those who work @ Blocs themselves.

In my head, for an experienced person, it would be “click here, add this class to all your images. done.” or “click this, ensure this setting on your columns. done”

Again, I’ve done this in a custom written HTML site, that I wrote, where I did “width=100%” and/or “height=auto” ~ I went to blocs thinking things like this would be easier. Still, if I could override the existing width / height or otherwise apply this “width=100%” and/or “height=auto” in blocs, that should still solve this issue.

[webdeersign]

@itsTYT I was thinking about providing some assistance here, but the information you provided was quite vague and still is after 2 weeks. So based on how I interpret your issue, to summarise, my best guess is that you are trying to display an absolutely huge, very tall portrait image on all mobile devices so that you don’t lose any part of the image.

So firstly, reduce the size of that image, as it is over 3700px high, because mobile users may give up on your site just becuse of that huge image. You could for example, create a 180px wide version for XS and that may solve all or your problems.

If you add an image to Blocs, it is by default, a responsive image that will scale and keep its’ ratio with the width of the device including whatever padding or margin is set. Therefore, by adding the appropriate side padding or margin (that you will need to decide on), you can adjust the height of your unusually tall image. Except on landscape mode of course.

Then, tackle the larger sceen widths and set the width to be whatever you want. If I was doing this I would probably set to a max width of 350-500px above XS.

Also, you need to test this on a browser and size it down to 320px wide for full mobile compatibility.

One more observation, your Alt text has 20% characters in it which need to be replaced by spaces.

[KBConcepts]

@webdeersign

some assistance

Now considering how busy everyone is… you have gone out of the way to provide some good feedback to this subject. That was really kind of you to do so.

[itsTYT]

Hey, if anyone asked for more information I’d be happy to provide it. Just to confirm that it wasn’t something in that bloc, here’s a test bloc.bloc (1.1 MB) I whipped up which has the same thing. How can one fit this whole image’s height, dynamically by device screen size?

Here’s a site (pw:333333333) I coded myself that shows exactly the behavior I am looking for - no matter what device I view it on, the height of the entire image fits. iPad, mobile or desktop - and I genuinely coded it in 5 minutes. you can even open it in your favorite browser and resize the window and see it move accordingly
So the behavior I am looking for is what we see when we use html code like “height=100%”, which is how I did the above site

I am not sure how the conclusion was reached that it is a very tall image as, all the screenshots from blocs and the site in prior replies show the images are just iOS screenshots. The pixels might be large only because the quality is high, but the ratio is the exact same as the iPhone.

Currently, I was able to set a height that fit well on iPhone 14 Pro, but doesn’t fit well or fill by height on either the iPhone 14 Pro Max or iPhones smaller than the 14 Pro - that’s also pointing to the issue. The images are a finite pixel amount at each breakpoint, not changing for each device.
Whereas the other site I mentioned as a reference to the behavior I want, no matter what device you open it on, that one fills by width.

Yes, the alt text isn’t great, thank you. I can fix that. My main concern as of now was getting this right so I can breathe.
I just can’t fathom that all it takes in raw html is two words, “width=100%” or “height=auto”, and it just cannot be done here.
Again, if anyone knows how to add html code onto that image / class while overriding the width height amounts, that could be a way to fix this

thanks all for the time…if I can’t get it solved in the next few days, I’ll just have to transition to writing it by hand or some other software.

Here are some additional screenshots that show the problem and desired outcome:

Where the first is not fitting the whole image, and the second is. I am aware the second is by width and the first need be by height, but it’s the same thing just swapped.

Thank you all for your time.

If this doesn’t reach a solution, at least the devs know what they can add next, because it seems there’s quite a few people that want this.
I did find some other threads on this, all that did the same of removing all elements from lg and inserting them only on XS - which still wouldn’t make it responsively fill the device screen width / height as desired.

Thanks all! Best

[PeteSharp]

You have to realise Blocs is using the Bootstrap framework. Since you actually ignored my offer to help you, I am only do this for the benefit of others on the forum who might like to know.

Select the Bloc, set to full width

Select the Row, disable Gutters (mainly for landscape images)

Use vh, which means viewport height. So your styles will look something like this.

The result (on iPad - landscape and portrait)

And iPhone

And desktop

You could even set the max-width to 100 vw, which would then work for landscape images. (viewport width)

And to top it off, a video.

[Bootsie]

These are the absolute perfect settings.
Works great on every viewport.

[PeteSharp]

@Bootsie I will start a subscription up for the thread

[itsTYT]

Where did I ignore any request sir? You asked for the column settings on XS and I posted screenshots right away. I did see another comment where you said everyone is volunteering…but its not here anymore (which also didn’t make sense because the founder can’t realistically be volunteering on their own forum)

I don’t see any message from you that was ignored… if there is, my apologies, but please do point it out.

and yes, ultimately it is much bigger than me, seems many people have struggled with this

What’s super funny is, I just figured it out myself, and came to this thread to post the solution…and found it posted here

Yes, it’s solved now. Clicked on the class, set to vh, then I did 95 to allow it some gap. Solved!! Took two seconds but two weeks to get the answer…I’m still rather grateful to have it done in the end.

that does take care of 1. and 2. lastly, was #3, is there any way to set a page specific background? in efforts to address the scroll fx showing a different bg (screenshot in OP)

Thank you all for your time! emotion is not always conveyed over text and I can often sound rude but I’m just blunt, to the point.
I am grateful for everyone who has chimed in and helped, we got the biggest thing taken care of!! Thanks all!

[PeteSharp]

@itsTYT

I did see another comment where you said everyone is volunteering…but its not here anymore

That was a direct message, and i also asked for you to send the project if you wanted some help, since it was apparently urgent. It’s a community led forum, with a big range of experience from the novice to professional users and as such, people’s ability to volunteer time ebbs and flows and so do the replies, everyone is always learning (not to mention time zones).

Yes every one likes to tag Norm in a post, and he does reply, but not always straight away. With the recent release of 5, and fine tuning it’s going through, he is prioritising what he spends time on understandably.

There are links at the top of the forum here for tutorials (video) and documentation for Blocs. You can assign a background by bloc, via the side bar or making a class, or by page or the entire project, using a class and adding it to the body tag in settings.

[itsTYT]

My sincerest apologies, I did not see that DM until now!! Thanks! we can mark this solved!!
You mentioned bootstrap but, if I knew a lick of bootstrap I wouldn’t be using a no code editor
I should go through those tutorials! That’ll be an excellent place for me to start
P.S. kudos to you for volunteering…that is too nice of you (seriously - you deserve something for it! )