Testy: Difference between revisions

From WytheriaWiki
(Created page with "<style> →‎Define a flex container for the 6 images: .image-container { display: flex; flex-wrap: wrap; } →‎Style the images within the container: .image-container img { width: 100%; →‎Make the images fill the container width: height: auto; →‎Maintain aspect ratio: } →‎Use media queries to adjust the layout for mobile screens: @media only screen and (max-width: 600px) { .image-container { flex-direction: column; /* Stack images vertically on...")
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<style>
{{Testy
/* Define a flex container for the 6 images */
|content1=[[File:Starter guide.png|330px|center|link=starter guide]]
.image-container {
|content2=[[File:Moneymaking.png|330px|center|link=Money Making]]
  display: flex;
|content3=[[File:Skilling.png|330px|center|link=Skilling]]
  flex-wrap: wrap;
|content4=[[File:Minigames.png|330px|center|link=Minigames]]
}
|content5=[[File:Bosses2.png|330px|center|link=Bosses]]
 
|content6=[[File:Other Guides.png|330px|center|link=Misc Guides]]
/* Style the images within the container */
}}
.image-container img {
  width: 100%; /* Make the images fill the container width */
  height: auto; /* Maintain aspect ratio */
}
 
/* Use media queries to adjust the layout for mobile screens */
@media only screen and (max-width: 600px) {
  .image-container {
    flex-direction: column; /* Stack images vertically on smaller screens */
  }
}
</style>

Latest revision as of 23:44, 20 June 2024

       {{{content7}}}