Display Primary Sidebar before Main content on mobile devices

This topic has 5 replies, 3 voices, and was last updated 2 years, 5 months ago by Sakin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
June 21, 2022 at 3:23 pm #306845

heinelg
Participant

Site: https://ridgeviewmennonite.org/

Theme: Catch Responsive (free) Child

We would like the four sidebar widgets in the primary sidebar to display before the main content area, above the <h1 class=”entry-title”>Welcome</h1> header. Can this be done?

Thanks!

June 22, 2022 at 1:23 am #306864
tikaram
Participant
@heinelg : Login to your WordPress admin section.

Go to Appearance => Customize => Additional css and add the following css. Let me know if this helps resolve your issue.
```
@media only screen and (max-width: 480px) {
    .site-content .wrapper {
         display: flex;
         flex-direction: column-reverse;
     }
}
```
June 22, 2022 at 10:34 pm #306896

heinelg
Participant

Thanks, @tikaram – that displays the sidebar widgets above the content for a portrait cell phone but not for landscape cell phones or small tablets. Can the same thing be done for wider screen widths?

June 22, 2022 at 10:36 pm #306919
Sakin
Keymaster
@heinelg: then you can change the max-width in the above CSS. Like replace the previous CSS with the following CSS:
```
@media only screen and (max-width: 990px) {
    .site-content .wrapper {
         display: flex;
         flex-direction: column-reverse;
     }
}
```
Regards,
Sakin
June 23, 2022 at 10:48 am #306960

heinelg
Participant

Thanks for your assistance. Your suggestion didn’t give me the appearance I wanted so I’ve moved the buttons that were in the sidebar to my child header after the catchresponsive_before_content do_action and styled them to be distributed horizontally plus I changed the default layout to No Sidebar.

June 23, 2022 at 3:27 pm #306961

Sakin
Keymaster

@heinelg: That’s a nice solution to do with the child theme and working with hooks. Thanks.
Author

Posts