« Web, HTML, Tech Forum

How Do I Code A Floatie To Auto Resize To Device Size?

Posted by kaito

posted

Forum: Web, HTML, Tech

I want to work on making my profile more mobile friendly, starting with the floaties! ^_^)/

Google showed me those 'code school websites' to try to answer my question, when usually I can easily find Spacehey blogs already answering it for me... TwT;; So I was wondering if anyone here knows how? I tried what one of the websites said and it didn't seem to work! :d

"How Do I Code A Floatie To Auto Resize To Device Size?"


Report Topic

1 Reply

Reply by Inccubus Fangzz

posted

<div style="position: fixed; bottom: 0px; right: 10px; max-width: 40vw; z-index: 99;" >

<img src="your-image-here" class="floatie"/>

</div>

<style>

.floatie {

  height: 30vh;

}
</style>



explanation:

the "bottom" and "right" attributes define the position of the floatie on you page, you can change them to top and right and change the px values to your liking

"max-width: 40vw" defines that the width of the image will take at maximum 40% of the width of the screen, once again, feel free to change that depending on the number of elements in your page

"height: 30vh" means the size of your image will be 30% of the size of the screen,so it is responsive to the size of the device you're using, feel free to change the value


Permalink Report Reply