Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ How to correctly align bands and text width with video width - in mobile vertical view?
Posted by: calmabubbasst Aug 14 2022, 06:47 AM
Hello, as or already explained in this https://forums.htmlhelp.com/index.php?showtopic=61085&st=0&gopid=144051&#entry144051,
i don't have much skills with html and css programming, to make these web pages i copied a free template and made some changes, but i need help to fix some things:
If you look at the main page https://www.nastri-trasportatori.net with a smartphone, and look at the site vertically, you will notice that there is a white vertical band on the right: I think it's the fault of how I copied the video code ...
Maybe I need to widen the bands and texts or maybe I need to narrow the width of the videos ...
How can I correct this point, so that everything is aligned and without white band or that the videos are aligned and do not come out when I use a smartphone vertically (while otherwise everything is left as it is now)?
https://ibb.co/N9yp1kT
Posted by: Christian J Aug 15 2022, 04:32 PM
Not sure what is going one, sorry. Maybe some other forum member can figure it out?
The VIDEO elements are 560px wide. If the viewport is narrower than that, it seems the VIDEO elements spill out of their gray parent elements, and somehow that makes the gray parent elements become narrower. That in turn causes the white BODY background to appear as a white "vertical band" on the right side.
Posted by: calmabubbasst Aug 18 2022, 04:12 AM
Not sure what is going one, sorry. Maybe some other forum member can figure it out?
The VIDEO elements are 560px wide. If the viewport is narrower than that, it seems the VIDEO elements spill out of their gray parent elements, and somehow that makes the gray parent elements become narrower. That in turn causes the white BODY background to appear as a white "vertical band" on the right side.
It's not just a question of video width,
as you can see the text also behaves badly,
I believe that the problem is in the commands that regulate the responsive, but I do not understand which are the commands to be adjusted to fix
Can you help me?
https://ibb.co/q7Xpgm6
Posted by: Christian J Aug 18 2022, 06:21 AM
It's not just a question of video width,
as you can see the text also behaves badly,
Which page does that screenshot show? On https://www.nastri-trasportatori.net the text looks normal.
I did notice that some javascript effect makes the text slide in as you scroll down the page (a bit annoying to be honest), but only in mobile view.
Posted by: calmabubbasst Aug 31 2022, 01:45 AM
... sob ... sigh ... I cant able to find solution,
I m not able to find "the culprit" of this behavior ... 
Posted by: Christian J Aug 31 2022, 11:44 AM
In what smartphone browsers do you see this? And in what resolutions?
I don't see it in any of my desktop browsers, even when the window is just 480px wide. When using smartphone simulation (in my desktop browsers' Inpector), I still only see it in Chrome-related browsers with 580px width. I do not see it in Firefox-related desktop browsers, even when I use their smartphone simulation.
Posted by: pandy Sep 1 2022, 07:46 AM
FWIW I don't see it. Neither in FF nor Chrome on Android 10. But the page doesn't work well in Chrome. I have to scroll large empty areas between the main sections. So large I had thought I had reached the end of the content hadn't I known otherwise. And then the content comes sweeping in in a rather annoying way. Doesn't look like that at all in FF.
Posted by: calmabubbasst Sep 2 2022, 03:19 AM
FWIW I don't see it. Neither in FF nor Chrome on Android 10. But the page doesn't work well in Chrome. I have to scroll large empty areas between the main sections. So large I had thought I had reached the end of the content hadn't I known otherwise. And then the content comes sweeping in in a rather annoying way. Doesn't look like that at all in FF.
sigh sig ...
this is not nice ...
but how can I do to fix?
Could you help me? .. again ..
Posted by: pandy Sep 2 2022, 04:50 PM
Afraid mobile is a mystery to me...
Posted by: Christian J Sep 3 2022, 05:55 AM
FWIW I don't see it. Neither in FF nor Chrome on Android 10.
So where does it happen (besides in the smallscreen emulator of Chrome desktop browsers)? In what browsers have you seen it, calmabubbasst?
Do you mean the empty areas where the content later sweeps in? Then the simple solution should be to remove the sweep effect...
Posted by: pandy Sep 3 2022, 10:55 PM
It's probably because of the sweepery, but the space is larger. I scrolled and scrolled and scrolled.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)