rearranging elements and widgets for the mobile version

I have uploaded my site to a staging site on WPEngine so I can share it with you and get some support. Here is the url:
http://animalsofhaiti.wpengine.com/
I can give you the username and password for this so you can see it.
This was made with a child them of the Brassica theme, but I am only using one page with no nav and I have changed it pretty much totally from the original theme.

My questions is, I want to change the order of elements for the mobile version (@media all and (max-width: 680px) ). I need to get the elements that are now side widgets, and that I created using the widget area in the wp-admin, into the main flow, so that everything is in one column. Can I do this just using CSS?

I have just learned how to use flexbox, and was thinking that I could put all the elements in one container and organize them with flexbox. I have been finding the names of the elements using Chrome developer tools and using them in my CSS.

Will this work and if so, is this the best way to do this?

Can you help me with this or point me to a resource where I can learn how to do this? I realize I may need to go to the jobs board, but I am trying to learn, so I need someone to show me how.

I appreciate any help you can give me.

Thank you!

Best,

Cecile Kaufman

  • Dimitris

    Hello there Cecile,

    hope you're doing good today! :slight_smile:

    This indeed surpasses the scope of our support and should be considered custom development, but we can still have a quick look into your theme to see if we can share some insights.

    Please keep in mind that this is based on the actual HTML markup of these templates and the CSS that's on top of these, as there're multiple ways to create a grid system, and how this will correspond in different viewports.

    Flexbox can indeed become a useful tool for responsive design, following link is also demonstrating the use of it :wink:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Having said that, please send us over an email with the followings, as this is a publicly available forum and we shouldn't post sensitive information in it.
    You should send us your details through our safe contact form https://premium.wpmudev.org/contact/#i-have-a-different-question using this template:

    Subject: "Attn: Dimitris"
    - HTTP authentication (username/password)
    - WordPress admin (login url/username/password)
    - FTP credentials (host/username/password)
    - link back to this thread for reference
    - any other relevant urls

    Keep in mind the subject line as ensures that it gets assigned to me.

    If this is to urgent for you, please do advise our jobs board page, Jobs & Pros

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.