MediaWiki:Common.css: Difference between revisions

From Begonia Wiki

No edit summary
No edit summary
 
(100 intermediate revisions by the same user not shown)
Line 1: Line 1:
<style>
/* Default styles for larger screens */
    .infobox-container {
.page-container {
        display: flex;
  display: flex;
        align-items: flex-start;
  align-items: flex-start; /* Align items to the top */
    }
}


    .infobox {
.infobox-container {
        flex: 0 0 auto;
  width: 30%; /* Adjust the width as needed */
        margin-right: 20px; /* Adjust this value as needed */
  float: left; /* Float the infobox-container to the left */
    }
}


     .main-content {
.infobox-wrapper {
        flex: 1 1 auto;
  width: 100%; /* Ensure the wrapper takes up the full width */
     }
  order: 2; /* Set the order to display the infobox below the image */
</style>
}
 
.infoboximg {
  width: 90%; /* Ensure the image takes up the full width of .infoboximg */
  order: 1; /* Set the order to display the image above the infobox */
}
 
.infobox {
  width: 90%; /* Ensure the infobox takes up the full width */
}
 
.content {
  width: 100%; /* Adjust the width as needed */
  padding-left: 5%;
}
 
/* Media query for smaller screens (tablets) */
@media (max-width: 1024px) {
  .page-container {
    flex-direction: column; /* Stack elements vertically on smaller screens */
     align-items: center; /* Center align content */
  }
 
  .infobox-container, .content {
    width: 100%; /* Allow each element to take up the full width */
     margin: 0; /* Remove any margins on smaller screens */
  }
}
 
/* Media query for mobile devices */
@media (max-width: 768px) {
  .page-container {
    align-items: flex-start; /* Align items to the top */
  }
}

Latest revision as of 08:07, 27 September 2023

/* Default styles for larger screens */
.page-container {
  display: flex;
  align-items: flex-start; /* Align items to the top */
}

.infobox-container {
  width: 30%; /* Adjust the width as needed */
  float: left; /* Float the infobox-container to the left */
}

.infobox-wrapper {
  width: 100%; /* Ensure the wrapper takes up the full width */
  order: 2; /* Set the order to display the infobox below the image */
}

.infoboximg {
  width: 90%; /* Ensure the image takes up the full width of .infoboximg */
  order: 1; /* Set the order to display the image above the infobox */
}

.infobox {
  width: 90%; /* Ensure the infobox takes up the full width */
}

.content {
  width: 100%; /* Adjust the width as needed */
  padding-left: 5%;
}

/* Media query for smaller screens (tablets) */
@media (max-width: 1024px) {
  .page-container {
    flex-direction: column; /* Stack elements vertically on smaller screens */
    align-items: center; /* Center align content */
  }

  .infobox-container, .content {
    width: 100%; /* Allow each element to take up the full width */
    margin: 0; /* Remove any margins on smaller screens */
  }
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .page-container {
    align-items: flex-start; /* Align items to the top */
  }
}