The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to correctly align bands and text width with video width - in mobile vertical view?
calmabubbasst
post Aug 14 2022, 06:47 AM
Post #1


Member
***

Group: Members
Posts: 39
Joined: 20-July 22
Member No.: 28,449



Hello, as or already explained in this post,
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 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)?

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 15 2022, 04:32 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Aug 18 2022, 04:12 AM
Post #3


Member
***

Group: Members
Posts: 39
Joined: 20-July 22
Member No.: 28,449



QUOTE(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.


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?

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 18 2022, 06:21 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(calmabubbasst @ Aug 18 2022, 11:12 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.

QUOTE
I believe that the problem is in the commands that regulate the responsive,

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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Aug 31 2022, 01:45 AM
Post #5


Member
***

Group: Members
Posts: 39
Joined: 20-July 22
Member No.: 28,449



... sob ... sigh ... I cant able to find solution,
I m not able to find "the culprit" of this behavior ... sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 31 2022, 11:44 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 1 2022, 07:46 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Sep 2 2022, 03:19 AM
Post #8


Member
***

Group: Members
Posts: 39
Joined: 20-July 22
Member No.: 28,449



QUOTE(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.



sigh sig ... blink.gif
this is not nice ...

but how can I do to fix?

Could you help me? .. again ..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 2 2022, 04:50 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Afraid mobile is a mystery to me...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 3 2022, 05:55 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Sep 1 2022, 02:46 PM) *

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?


QUOTE
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.

Do you mean the empty areas where the content later sweeps in? Then the simple solution should be to remove the sweep effect...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 3 2022, 10:55 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It's probably because of the sweepery, but the space is larger. I scrolled and scrolled and scrolled.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 03:44 AM