hello everyone, i have completed my product landing page but there is one problem, I have added a iframe in my landing page and that iframe is not responding according to the screen size, on less than 677px screen size the content of iframe starts hiding, can anyone give solution of this?
try this
iframe {
margin-top: 3.6em;
/*height: 36rem;*/
width: 100%;
}
and remove the width setting in the html as that is not good practice
I have tried this, but still it is not working
works for me (hereâs a fork of your pen)
but now the upper part of the video is hiding
here it is fixed
If you need more info on what I changed read this:
https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/
but with shrinking screen size the iframe getting disappear, i want full height in mobile view
is this the effect you are going for?
Look this is the minimum width what I am getting from my pc, but still, it is not as responsive as i want, you can see in the word âExcusesâ character âEâ is still hidden
thank a lot for all your help
ok, look again? maybe this is what you wanted. All Iâm doing is playing around with the max/min height/widthsâŚ
yes this what i want but why you have given 97vw? i do not want any empty space, one more thing my about us heading is now also hidden
I was just playing with the sizes because I noticed your page has some horizontal scroll.
Whenever there is unexplained horizontal scroll you have to investigate all the elements to see which one is causing it.
so what is the reason behind horizontal scroll, that 100vw ?
youâll have to investigate that by removing all the elements and then adding them in one by one till you find the culprit.
as for the hidden about us, I think you should probably go back and figure out a layout strategy for the page.
I had to use flex to handle the video issue (on the body) but you should probably think how to lay out all the remaining items.
that mean i have to again create the page from scratch?
do you mean to investigate the horizontal scroll? No. Just fork the page and delete all the html and then slowly add it back in (copy and paste should help you do it fast). Youâll discover the culprit and can fix the issue in the old codepen.
As for layout, I canât comment because I have only looked at your video section.
For myself, I like to work in sections. Once I have one section working, I add the next. That way I am not stuck with handling alignment and problems that are âlegacyâ from the previous section I was working on mixing up with the new section. etc.
ps. I fixed the disappearing About Us by adding a margin-bottom to the video
Great stuff @hbar1st, and @naveen_coder, great that youâre working on iframes, because I plan to add iframes to an old project pretty soon, and I will need to make it responsive too haha