Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
Autumn, 08 Oct 2026 - @134.09
Forum Activity: Four Stars Random | Recent Posts | Guild Recents
News: It's only life! :dog: Guild Events: TIME FOR HALLOWEEN CRAFTS!
Super News: ~~MelonLand's Halloween Profile Design Contest 2026~~
+  MelonLand Forum
|-+  Da Web Revival
| |-+  ✁ ∙ Web Crafting
| | |-+  I redesigned my homepage


« previous next »
Pages: [1] Print Embed
Author Topic: I redesigned my homepage  (Read 1127 times)
cyberfun1 (dizz)
Hero Member ⚓︎
*****
View Profile WWWArt


I dont🧠dat evrythngs a lie, as long as u ♡me 4evr
⛺︎ My Room
Matrix: Chat!
XMPP: Chat!

Guild Memberships:
Artifacts:
Wishing you Happy Times when you're online!20% coolerFirst 1000 Members!Joined 2023!
« on: Summer, 15 Jun 2024 @097 » Toggle Font Embed

I redesigned my websites homepage because, well, I didnt like the old iteration. I like this version a lot. But i need some help on how to do certain things
1. id like the header image to be smaller when the screen size decreases
2. id like the image at the bottom to be next to the text

id love to have some advice on how to make my CSS less complex too, cuz i dont wanna have annoying css and html again like in my last homepage.

https://diffydude.neocities.org

Logged

https://diffydude.neocities.org/blinkies/FRIENDSHIPISMAGIC.png
https://diffydude.neocities.org/blinkies/TAPEHERO.png
https://diffydude.neocities.org/blinkies/EMOTICONUSER.gif
https://diffydude.neocities.org/blinkies/XBOX360.png
https://diffydude.neocities.org/blinkies/FIREFOXUSER.jpg
https://diffydude.neocities.org/blinkies/NYANCAT.gif
https://diffydude.neocities.org/blinkies/BISEXUAL.png

Artifact Swap: I met Dan Q on Melonland!
swamptrogg
Jr. Member ⚓︎
**
View Profile WWWArt


aeugh?
⛺︎ My Room
StatusCafe: swamptroggle

Guild Memberships:
Artifacts:
HurbyFirst 1000 Members!Joined 2023!MIDI Warrior
« Reply #1 on: Summer, 15 Jun 2024 @136 » Embed


1. id like the header image to be smaller when the screen size decreases


For this, I think flexbox is exactly what you're looking for! It *can* be kind of complex to get the hang of, but I learned through flexbox zombies and it was a really engaging way to practice the syntax. It's free and to do what you want with flexbox, I think you'd be able to accomplish it pretty quickly!

As far as getting the image to display inline with the text, there's a bunch of ways to go about it but none of them are particularly beginner friendly. If you were to use flexbox, you could create a div column for the text and another for the image directly next to it? That's the easiest way I would do it, but that's only because flexbox is what I'm familiar with.

Logged

https://images.squidge.org/images/2024/06/12/gangrelidles-export.gif   https://images.squidge.org/images/2024/06/12/crit.gif   https://images.squidge.org/images/2024/06/12/gangrelidles-export.gif

Artifact Swap: neko kicking feetcaramelldansen nekoclownspinMametchiDS white
Memory
Guest

« Reply #2 on: Summer, 15 Jun 2024 @162 » Embed

For this, I think flexbox is exactly what you're looking for! It *can* be kind of complex to get the hang of, but I learned through flexbox zombies and it was a really engaging way to practice the syntax. It's free and to do what you want with flexbox, I think you'd be able to accomplish it pretty quickly!

As far as getting the image to display inline with the text, there's a bunch of ways to go about it but none of them are particularly beginner friendly. If you were to use flexbox, you could create a div column for the text and another for the image directly next to it? That's the easiest way I would do it, but that's only because flexbox is what I'm familiar with.

That's what I would do as well, flexboxes fix everything.

Logged
varve
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room
RSS: RSS

Guild Memberships:
Artifacts:
Joined 2024!
« Reply #3 on: Summer, 15 Jun 2024 @676 » Toggle Font Embed

1. id like the header image to be smaller when the screen size decreases

Your header image doesn't have any dimensions, so the web browser is showing it at actual size. If you put a max-width in percentage (maybe start with 80%) it will scale with the page, down to phone size or up to its actual size.

Logged

Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
@000 Melon
Land
Forum Art Hub Chat Webring Explore Random Recent Tenement Arcade Want to Login or Join ? Web Craft Guide Graphic Catalogue Wiki Help I'm Lost! Link Land Newsletters Image Stream Minecraft: Online
Zap!
Passport Sites tamaNOTchi Asatte Add your site?
Aero Archive Onio Cafe 32 Bit Cafe Status Cafe