Responsiveness issue because the <canvas> tag can't contain the html tags in it!


#1

Hi :slightly_smiling_face:

Here is the Live link where I’m facing the issue.

I’m using paper.js to draw a wavy canvas in the very first section where it says “I’m UMAR”

As the <canvas> tag couldn’t contain any HTML elements, so I had to pull up my text div (that contains the text “I’m UMAR your next web designer & developer”) with a negative margin.
But this has caused an issue of responsiveness.
On smaller desktop screens there appears a white space below the canvas.
I’ve tried absolute positioning but it didn’t work.

See the attached pic!

Can anyone please help me fix this issue of responsiveness?


#2

On mobile screens there is no gap as you seem to have adjusted the margin using device-min-width queries. If instead you used min-width media queries then the smaller desktops would benefit also.

e.g. (one instance)

@media screen and (min-width:1024px){
 .second-sec-margin{
     margin-top:197px!important;
  }
}

There really is no need to use min-device-width at all as what you are essentially interested in is the width available for your design irrespective of device. You need to be device agnostic in most cases (use min-width or max-width media queries).

Note that your design is also broken on large desktops with a white gap again appearing at around 2000px and getting larger (my monitor is 2500px). Using magic numbers (like margin-top:-335px) is bound to fail and should be avoided at all costs.

Therefore I suggest you start again and don’t use any magic numbers in that top section. As your canvas element has been set to 80vh you should be easily able to overlay your text “I’m UMAR your next web designer & developer” on top of the canvas element using absolute positioning.

Just set a stacking context with position:relative; on the element called #home and then absolutely place valign-wrapper into position using an 80vh height. Centering can be achieved by using flexbox.

The following content will then keep track with the canvas element automatically so remove all the other magic numbers. You will need to set the canvas element to display:block to kill the whitespace node and you also have a collapsing margin where you are using margin-top:10% on your #centreMe div. The margin collapses onto .second-sec-margin and gives you 10% of white background instead of what it should be. (note that vertical margins refer to the width of the element and are therefore not consistent either). To stop the margin collapse you could force a new block formatting context or add a coloured top border to .second-sec-margin.

That should get you closer to what you want.

BTW is there any way to turn that graphic off as its giving me a right headache trying to debug :slight_smile:


#3

Yes it is. To stop the animation, just disable Javascript as soon as the page is loaded. :slight_smile:

The page needs to load with javascript enabled to get pass the totally useless preload cover. Then the animated grafic is loaded with Javascript.


#4

Thank you so much for helping me.
I’ve disabled that canvas movement on mouse move.

I was almost able to fix the issue following your guide (and I’m fixing this on a sample page here ) but now there is only one little issue, now the text " your next web designer & developer” is not perfectly centered, I mean when the words (Designer and Developer) are swapped with an animation, during that animation the string ( your next Web-) appears to be left aligned and when the animation is complete it’s center aligned.

I’ve applied display: flex; justify-content: center; on it as you suggested.

How can we make it centered all the time (during animation too)?
Here is the new live link.

Again thanks for your help :+1:t2:.


#5

If I’m understanding correctly then try the following code.

#textWrapper .title{float:none;}

It seems to do what you want although the text will still have to jump a little as the larger word appears.


#6

Thanks :+1:t2::slightly_smiling_face:

I also fixed that by adding a width to the #textWrapper.