Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Layout of elements on mobile devices

    • 6 years, 4 months ago optimized
      Participant

      Expired

      Hi,

      As you can see at https://optimizeddevelopment.net/ambientec/

      for Fragrancia, Visual, etc the we have:

      • Image Fragrancia
      • Text Fragrancia
      • Text Visual
      • Image Visual
      • etc

      This is correct on a desktop device but on a mobile device we require:

      • Image Fragrancia
      • Text Fragrancia
      • Image Visual
      • Text Visual
      • etc

      for it to make sense.

      How can we achieve this effect ?

      Regards,

      Mike

    • 6 years, 4 months ago Ruco
      Keymaster

      Hello Mike,

      Yes this can be done with a custom css. Please add a div id to the Visual Row. So we can style it for the responsive mode.

      Let us know.

      Regards!

    • 6 years, 4 months ago optimized
      Participant

      Expired

      Hi Ruco,

      We cannot see the place to add the Div Id in the Row.

      We can see this in the Colulm but that is not what you requested.

      Regards,

      Mike

    • 6 years, 4 months ago Ruco
      Keymaster

      Hello,

      It is a field called Row ID. Extra Class.

      If you can’t do it by yourself give to us your wp creds and online link so we can login and do that customization for you.

      Regards!

    • 6 years, 4 months ago optimized
      Participant

      Expired

      This reply has been marked as private.
    • 6 years, 4 months ago Mirela
      Participant

      Hello,

      Please add this the new class to second row and 4th row. Then add this css in your General Options > Custom Css box:

      @media (max-width: 797px){
      .mobile {
        display: -webkit-flex; /* Safari */
        -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
        display: flex;
        flex-direction: row-reverse; 
      }}

      Let us know.
      Best regards!

    • 6 years, 4 months ago optimized
      Participant

      Expired

      Hi Mihalia,

      We tried to set this up as you suggested but, as you can see on mobile devices, it did  not work.

      Did we do something wrong ?

      Regards,

      Mike

    • 6 years, 4 months ago Mirela
      Participant

      Hello,

      Please add some wp credentials in a private reply. So i can check and do it for you.

      Best regards!

    • 6 years, 4 months ago optimized
      Participant

      Expired

      This reply has been marked as private.
    • 6 years, 3 months ago Mirela
      Participant

      Hello,

      Sorry for the ate reply.
      I added this code into yoru General Options > Custom Css box:

      @media (max-width: 480px){
      .viewport {
          overflow-x: hidden;
          }
      .mobile.full-width-content .span_12 {
       display: flex; 
       flex-direction: column-reverse;
      }
      }
      
      @media (max-width: 797px){
      .mobile {
       display: -webkit-flex; /* Safari */
        -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
        display: flex;
        flex-direction: column-reverse;
      }}

      Please clear cache and refresh site in mobile.

      Best regards!

Viewing 9 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password