How can i change the following?

Envato Customers Looking For
1

Hello

I’m currently using the Themerex Ozeum template, but there is something i’d like to change in the mobile version of the template:

Open the following website on your phone:

At the bottom of the page, there is this kind of “summarised information” part.

CHAERT 1626
CHAERT 16261179×2104 83.1 KB

I’d like to have it at the beginning of the page.
Does someone have an idea, how to change this?

Thanks in advance and best regards!

2

https://help.market.envato.com/hc/en-us/articles/203039054-How-to-contact-an-author

3

You can use CSS media queries to change the order of columns on mobile devices. For example:

@media (max-width: 767px) {
  article.portfolio_page.itemscope.portfolio_page_details_right {
    display: flex;
    flex-direction: column;
  }

  .portfolio_page_details_right .portfolio_page_details_wrap {
    order: 1;
  }

  .portfolio_page_details_right .portfolio_page_content_wrap {
    order: 2;
  }
}
2 Likes
4

That worked, thank you very much!

1 Like
5

Always Welcome :slight_smile:

6

This CSS snippet is targeting screens with a width of 767px or less (common for tablets or mobile devices). It applies the following styles:

  1. article.portfolio_page.itemscope.portfolio_page_details_right:
  • Changes the layout to flex and sets the flex-direction to column, stacking the items vertically instead of horizontally.
  1. .portfolio_page_details_right .portfolio_page_details_wrap:
  • Changes the order of the .portfolio_page_details_wrap element to 1, meaning it will be displayed first in the flex container.
  1. .portfolio_page_details_right .portfolio_page_content_wrap:
  • Changes the order of the .portfolio_page_content_wrap element to 2, meaning it will be displayed second in the flex container.

This is commonly used to adjust the layout for smaller screens where you want to reorder content for better readability or usability.