WordPress.org

Forums

Simnor Shortcodes
Awesome! (1 post)

  1. protorob
    Member
    Posted 1 year ago #

    Ok, i installed your plugin with the twentytwelve theme and saw that when viewing it in a mobile resolution the columns skews accordingly and honestly this is not the expected behaviour (IMHO) so i found a solution, may be a not-so-clean one but it works pretty well.

    For having the columns stacked when you are on mobile simply add these lines on the shortcodes.css file after line 90 and before /* Media */ :

    * STACKABLE COLUMNS FOR TWENTY TWELVE */
    
    @media only screen and (max-width:481px) {
    
    body .simnor-shortcode-cols {
    	display: block;
    	overflow: hidden;
    	clear: both;
    	margin: 0 0 20px 0;
    }
    	body .simnor-shortcode-col {
    		float: left;
    		display: block;
    	}
    		body .simnor-shortcode-col-inner {
    			margin: 0 15px 0 0;
    		}
    
    	body .simnor-shortcode-cols-half-half .simnor-shortcode-col-a,
    	body .simnor-shortcode-cols-half-half .simnor-shortcode-col-b { width: 100%; }
    
    	body .simnor-shortcode-cols-third-third-third .simnor-shortcode-col-a,
    	body .simnor-shortcode-cols-third-third-third .simnor-shortcode-col-b,
    	body .simnor-shortcode-cols-third-third-third .simnor-shortcode-col-c { width: 100%; }
    
    	body .simnor-shortcode-cols-twothirds-third .simnor-shortcode-col-a { width: 100%; }
    	body .simnor-shortcode-cols-twothirds-third .simnor-shortcode-col-b { width: 100%; }
    
    	body .simnor-shortcode-cols-third-twothirds .simnor-shortcode-col-a { width: 100%; }
    	body .simnor-shortcode-cols-third-twothirds .simnor-shortcode-col-b { width: 100%; }
    
    	body .simnor-shortcode-cols-quarter-quarter-quarter-quarter .simnor-shortcode-col-a,
    	body .simnor-shortcode-cols-quarter-quarter-quarter-quarter .simnor-shortcode-col-b,
    	body .simnor-shortcode-cols-quarter-quarter-quarter-quarter .simnor-shortcode-col-c,
    	body .simnor-shortcode-cols-quarter-quarter-quarter-quarter .simnor-shortcode-col-d { width: 100%; }
    
    	body .simnor-shortcode-cols-half-quarter-quarter .simnor-shortcode-col-a { width: 100%; }
    	body .simnor-shortcode-cols-half-quarter-quarter .simnor-shortcode-col-b,
    	body .simnor-shortcode-cols-half-quarter-quarter .simnor-shortcode-col-c { width: 100%; }
    
    	body .simnor-shortcode-cols-quarter-quarter-half .simnor-shortcode-col-a,
    	body .simnor-shortcode-cols-quarter-quarter-half .simnor-shortcode-col-b { width: 100%; }
    	body .simnor-shortcode-cols-quarter-quarter-half .simnor-shortcode-col-c { width: 100%; }
    
    	body .simnor-shortcode-cols-quarter-half-quarter .simnor-shortcode-col-a,
    	body .simnor-shortcode-cols-quarter-half-quarter .simnor-shortcode-col-c { width: 100%; }
    	body .simnor-shortcode-cols-quarter-half-quarter .simnor-shortcode-col-b { width: 100%; }
    
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Simnor Shortcodes
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.