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

Mobile view: reverse columns, change pic width & alignment, footer height

alignmentcolourcolumnsfooterhamburgermenuMobilereverse
    • 5 years, 1 month ago magdad
      Participant

      Hi,

      I have a few questions regarding mobile view:

      1.  On desktop view I have a row with two columns: first with text, second with graphic. On mobile view I would like this order to be reversed: first graphic, second (under) text. How can do it? I did not find it in options; I also tried those codes but they did not work:

       

      /*reverse row in mobile*/

      @media only screen and (max-width: 1001px) {

      .reverse-row >.col.span_12 {

      flex-direction: row-reverse !important;     } }

       

      @media (max-width: 480px){

      .post-type-archive .inner-content-row {

      display: flex;

      flex-direction: column-reverse; }}

       

      2. On mobile view there are margins on the left and right edge. Can I make graphics full width and keep texts as they are (with margins)

      3. On desktop view some graphics and texts are aligned to the left, on mobile view I would like them to be centred – how to do it?

      4. How to change footer height for mobile view?

      Thank you very much in advance!

      Magda

    • 5 years, 1 month ago Eldo
      Keymaster

      Hello,

      Can you send me your online and wp credentials (private reply) so I can look into it?

      Let me know.

      Regards!

    • 5 years, 1 month ago magdad
      Participant

      @Eldo sure, thank you. Can I add 2 additional questions that I did not find answer for?

      5. How to change hamburger colour? I tired to use this code, it changed colour for a while, after click colour comes back to blue.

      @media (max-width: 979px){

      .mobile_small_menu {  color: #4F4F50;}

      }

      6. How can I change colour of the active menu position? Eg. when I am on Applications subpage, I would like Applications in menu to have blue font. I know that side menu has this option, but standard menu unfortunately doesn’t.

      IMG-7920

      • This reply was modified 5 years, 1 month ago by magdad.
    • 5 years, 1 month ago magdad
      Participant
      This reply has been marked as private.
    • 5 years, 1 month ago Eldo
      Keymaster

      Hello,

      5. Please try to add this code instead:

      @media (max-width: 979px){
      
      .mobile_small_menu {  color: #4F4F50  !important;}
      
      }

      6. You have to add this custom code:

      .menu-small ul li.current_page_item{
         color:#4F4F50 !important;
      }

      Regards!

    • 5 years, 1 month ago magdad
      Participant

      Thank you Eldo, that worked!
      Did you manage by any chance to take a look at the website regarding questions 1-4?

    • 5 years, 1 month ago Eldo
      Keymaster

      Hello,

      Please check it now this the code i have added into Tower > General > Custom Css

      @media(max-width:767px){
          .page-id-19 #content{
          display: flex;
          flex-wrap: wrap;
          }
          
          .page-id-19 #content .vc_row-fluid:first-child{
              order:4
              
          }
          
           .page-id-19 #content .vc_row-fluid:nth-child(2){
              order:3
              
          }
         .page-id-19 #content .vc_row-fluid:nth-child(3){
              order:2
              
          }
          
          .page-id-19 #content .vc_row-fluid:nth-child(4){
              order:1
              
          }
          
          .page-id-19 #content .vc_row-fluid:nth-child(5){
              order:5
              
          }
         .page-id-19 #content .vc_row-fluid:nth-child(6){
              order:6
              
          }
          
          
          .page-id-19 #content .vc_row-fluid:nth-child(7){
              order:7
              
          }
          
          .page-id-19 #content .vc_row-fluid:nth-child(8){
              order:8
              
          }
          .page-id-19 #content .vc_row-fluid:nth-child(9){
              order:9
              
          }
          .page-id-19 #content .vc_row-fluid:nth-child(10){
              order:10
              
          }
          .page-id-19 #content .vc_row-fluid:nth-child(11){
              order:11
              
          }
          .page-id-19 #content .vc_row-fluid:nth-child(12){
              order:12
              
          }
          .page-id-19 #content .vc_row-fluid:nth-child(13){
              order:13
              
          }
          .page-id-19 #content .vc_row-fluid:nth-child(14){
              order:14
              
          }
          
      
          
      }
      
      @media (max-width: 979px){
      footer .inner .row-fluid [class*="span"]{
          padding-bottom:4px !important;
      }
      footer#footer .inner .row-fluid.ff:first-child{
          
          padding-top:10px !important;
      }
      footer#footer .inner .row-fluid.ff:first-child{
          padding-bottom:0px !important;
      }
      }

      Regards!

Viewing 6 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