how to change text alignment to image on browser viewport resize

[hollow parrot]

hi, i am currently in the process of making my own personal website, just to have one really, and i'd like to get help on this.

what i want to do is have the text aligned to my profile picture move from a right alignment to a bottom alignment if the browser viewport width gets narrow, like on mobile devices.

below is what it's looking like right now. i can provide the code if needed

(img1= what it currently looks like on desktop)
(img2= what it currently looks like on mobile)

the website's url is https://gamecuber.neocities.org/ if somebody wants to take a look at the code since i haven't provided it btw

[smoky nebula]

For this you should use flexbox and a media query.
To place image and text next to each other, you should add display:flex; to the parent element.
Then you make a media query and do something like

@media screen and (width <= 500px) {
  .parent {
    flex-direction:column;
  }
}

This will change the flex-direction so your text will be below the image instead of next to it when the width of screen is at 500px or smaller

[hollow parrot]

thank you. i'll try it when i get home.

[slow skiff]

Id really suggest to work with tailwind css

Its easy and will help a lot to make your website responsive

[smoky nebula]

You should still learn standard CSS before moving on to tailwind. It's like those people who learn React before they learn JavaScript ^^
I personally love CSS therefore i hate tailwind. And you are kinda limited with tailwind, so the things you cannot do with tailwind you have to write that as standard CSS anyway.
I personally think that the fastest way to write your CSS is by using SCSS with Emmet.

[slow skiff]

I have worked with css
But why write so lengthy code
Tailwind is powerful

I hardly dealt with anything which required me to use css
Tailwind has been perfect for me

[slate frost]

tailwind is css tho, very most of its classes is a single css property wrapped in utility

[slow skiff]

Yup

[smoky nebula]

it's not lengthy code if you use scss and emmet
if you use emmet, you can write df and hit tab, it will convert it to display:flex;
or let's say you want padding:10px 14px; you can do p10-14 and hit tab
Or if you want a border-radius, you can write bdrs10 and it will be converted to border-radius:10px;
It is actually very quick. And if you use SCSS you can create functions and mixins and loops and more to speed up your coding even more.
If you use tailwind, you cannot really use these emmet shortcuts for your classes and you cannot really use any mixins or anything.

But, it's good to know tailwind. If you want to work as a front-end developer, you will most likely be using tailwind. So yeah, definitely not a bad idea to learn tailwind and get used to it. But i would personally never use it for myself. Because i feel that it is very slow