Rotera spelares innehåll -90 grader för mobilversion

[bluelegend76]

• Question about Bulma: If I have a website where
  contains some HTML buttons, maybe some text, and an SVG image, what would be the easiest and most feasible way to rotate the entire content of main for a mobile (i.e. narrower width) version of the main page, possibly getting away with not even having to resort to an explicit media query?

Answer: There are a few ways to rotate the content of your

element for the mobile version of your webpage using Bulma, without necessarily needing an explicit media query. Here are some options:

1. Flexbox with flex-direction:

Use Bulma's flexbox utilities to wrap your content within the

element. Apply the is-flex class to the

element. Use the is-flex-direction-column class on the mobile viewport (e.g., screen size below 768px) to rotate the content vertically.

<main class="is-flex">
  </main>

<style>
@media screen and (max-width: 768px) {
  .is-flex {
    flex-direction: column;
  }
}
</style>

2. CSS Grid with grid-auto-flow:

Utilize Bulma's grid system to create a single-column layout within the

element. Implement the grid-auto-flow: column property on the mobile viewport to rotate the content.

<main class="container is-grid">
  </main>

<style>
@media screen and (max-width: 768px) {
  .container.is-grid {
    grid-auto-flow: column;
  }
}
</style>

3. Bulma Columns with Responsive Reordering:

Employ Bulma's columns component to arrange your content horizontally within the

element. Utilize Bulma's responsive classes like is-narrow-mobile and is-unstacked-mobile to reorder the columns vertically on mobile devices.

<main class="columns">
  <div class="column is-4 is-narrow-mobile is-unstacked-mobile">
    </div>
  <div class="column is-4 is-narrow-mobile is-unstacked-mobile">
    </div>
  <div class="column is-4 is-narrow-mobile is-unstacked-mobile">
    </div>
</main>

Advantages and Considerations:

• Flexbox: Offers simplicity and flexibility in layout adjustments.
• Grid: Provides more control over individual element positioning within the rotated layout.
• Columns: Useful when you already have horizontal content structure and want to maintain some visual hierarchy on mobile.

Remember, choosing the best approach depends on your specific content structure, desired visual outcome, and future maintenance considerations. It's always recommended to test and compare different options on various screen sizes to ensure it looks and functions as intended.

Additional Tips:

• Consider using Bulma's is-hidden-mobile class to hide unnecessary elements on mobile viewports.
• Adapt the breakpoints in the media queries based on your actual mobile responsiveness needs.
• Explore Bulma's documentation for more advanced layout options and utilities.

I hope this helps! Feel free to ask if you have any further questions or need more specific guidance for your website's layout.

[bluelegend76]