Jump to content

Archived

This topic is now archived and is closed to further replies.

Kedmyster

Grid system in RTL

Recommended Posts

Kedmyster

Hey,

 

I have a multilingual site in both RTL and LTR.

On the RTL version, I'd like the grid to act accordingly (have margins and floats from the right instead of the left).

 

I tried but I couldn't get it to work without messing grid responsive breaking points.

 

How can I achieve this?

Remember that the grid responsive breaking points ONLY resets margin-left to 0 so that needs to be taken into consideration.

 

Thanks in advance,

-kedmyster

Share this post


Link to post
Share on other sites
Danny

HI,

 

Can you provide a link to the site in question so we can take a closer look please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Kedmyster

Unfortunately, I can't.

 

I ended up doing the following(which worked btw),

I'd appreciate your thoughts:

 

For the dimensions of the grid, I edited the style.less of a child's theme and add this code:

// GRID
// --------------------------------------------------

@fluidGridColumnWidth:   7.49999999925%;
@fluidGridGutterWidth:    0.83333333325%;

// Default 1200px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         90px;
@gridGutterWidth:         10px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridRowSpace:            @baseLineHeight;

And for the RTL version for the grid, I used this code in the custom code section:

html[dir="rtl"] {
	.row > [class*="span"], .row-fluid > [class*="span"], .editor-row > [class*="span"], .row-no-response > [class*="span"] {
		float: right;
		margin-left: 0;
		margin-right: 0.83333333325%;
		margin-bottom: 21.7px;
	}
	.row.row-closed > [class*="span"], .row.row-set > [class*="span"], .row-fluid.row-closed > [class*="span"], .row-fluid.row-set > [class*="span"], .editor-row.row-closed > [class*="span"], .editor-row.row-set > [class*="span"], .row-no-response.row-closed > [class*="span"], .row-no-response.row-set > [class*="span"] {
		margin-left: 0;
		margin-right: 0;
	}
	.row > [class*="span"]:first-child, .row > section:first-of-type, .row .sortable-first, .row-fluid > [class*="span"]:first-child, .row-fluid > section:first-of-type, .row-fluid .sortable-first, .editor-row > [class*="span"]:first-child, .editor-row > section:first-of-type, .editor-row .sortable-first, .row-no-response > [class*="span"]:first-child, .row-no-response > section:first-of-type, .row-no-response .sortable-first {
		margin-left: 0;
		margin-right: 0;
		clear: both;
	}
	.row .offset12, .row-fluid .offset12, .editor-row .offset12, .row-no-response .offset12 {
		margin-left: 0;
		margin-right: 100.83333332325%;
	}
	.row .offset12.sortable-first, .row .offset12:first-child, .row-fluid .offset12.sortable-first, .row-fluid .offset12:first-child, .editor-row .offset12.sortable-first, .editor-row .offset12:first-child, .row-no-response .offset12.sortable-first, .row-no-response .offset12:first-child {
		margin-left: 0;
		margin-right: 99.99999999%;
	}
	.row .offset11, .row-fluid .offset11, .editor-row .offset11, .row-no-response .offset11 {
		margin-left: 0;
		margin-right: 92.49999999075%;
	}
	.row .offset11.sortable-first, .row .offset11:first-child, .row-fluid .offset11.sortable-first, .row-fluid .offset11:first-child, .editor-row .offset11.sortable-first, .editor-row .offset11:first-child, .row-no-response .offset11.sortable-first, .row-no-response .offset11:first-child {
		margin-left: 0;
		margin-right: 91.6666666575%;
	}
	.row .offset10, .row-fluid .offset10, .editor-row .offset10, .row-no-response .offset10 {
		margin-left: 0;
		margin-right: 84.16666665825%;
	}
	.row .offset10.sortable-first, .row .offset10:first-child, .row-fluid .offset10.sortable-first, .row-fluid .offset10:first-child, .editor-row .offset10.sortable-first, .editor-row .offset10:first-child, .row-no-response .offset10.sortable-first, .row-no-response .offset10:first-child {
		margin-left: 0;
		margin-right: 83.333333325%;
	}
	.row .offset9, .row-fluid .offset9, .editor-row .offset9, .row-no-response .offset9 {
		margin-left: 0;
		margin-right: 75.83333332575%;
	}
	.row .offset9.sortable-first, .row .offset9:first-child, .row-fluid .offset9.sortable-first, .row-fluid .offset9:first-child, .editor-row .offset9.sortable-first, .editor-row .offset9:first-child, .row-no-response .offset9.sortable-first, .row-no-response .offset9:first-child {
		margin-left: 0;
		margin-right: 74.9999999925%;
	}
	.row .offset8, .row-fluid .offset8, .editor-row .offset8, .row-no-response .offset8 {
		margin-left: 0;
		margin-right: 67.49999999325%;
	}
	.row .offset8.sortable-first, .row .offset8:first-child, .row-fluid .offset8.sortable-first, .row-fluid .offset8:first-child, .editor-row .offset8.sortable-first, .editor-row .offset8:first-child, .row-no-response .offset8.sortable-first, .row-no-response .offset8:first-child {
		margin-left: 0;
		margin-right: 66.66666666%;
	}
	.row .offset7, .row-fluid .offset7, .editor-row .offset7, .row-no-response .offset7 {
		margin-left: 0;
		margin-right: 59.16666666075%;
	}
	.row .offset7.sortable-first, .row .offset7:first-child, .row-fluid .offset7.sortable-first, .row-fluid .offset7:first-child, .editor-row .offset7.sortable-first, .editor-row .offset7:first-child, .row-no-response .offset7.sortable-first, .row-no-response .offset7:first-child {
		margin-left: 0;
		margin-right: 58.3333333275%;
	}
	.row .offset6, .row-fluid .offset6, .editor-row .offset6, .row-no-response .offset6 {
		margin-left: 0;
		margin-right: 50.83333332825%;
	}
	.row .offset6.sortable-first, .row .offset6:first-child, .row-fluid .offset6.sortable-first, .row-fluid .offset6:first-child, .editor-row .offset6.sortable-first, .editor-row .offset6:first-child, .row-no-response .offset6.sortable-first, .row-no-response .offset6:first-child {
		margin-left: 0;
		margin-right: 49.999999995%;
	}
	.row .offset5, .row-fluid .offset5, .editor-row .offset5, .row-no-response .offset5 {
		margin-left: 0;
		margin-right: 42.49999999575%;
	}
	.row .offset5.sortable-first, .row .offset5:first-child, .row-fluid .offset5.sortable-first, .row-fluid .offset5:first-child, .editor-row .offset5.sortable-first, .editor-row .offset5:first-child, .row-no-response .offset5.sortable-first, .row-no-response .offset5:first-child {
		margin-left: 0;
		margin-right: 41.6666666625%;
	}
	.row .offset4, .row-fluid .offset4, .editor-row .offset4, .row-no-response .offset4 {
		margin-left: 0;
		margin-right: 34.16666666325%;
	}
	.row .offset4.sortable-first, .row .offset4:first-child, .row-fluid .offset4.sortable-first, .row-fluid .offset4:first-child, .editor-row .offset4.sortable-first, .editor-row .offset4:first-child, .row-no-response .offset4.sortable-first, .row-no-response .offset4:first-child {
		margin-left: 0;
		margin-right: 33.33333333%;
	}
	.row .offset3, .row-fluid .offset3, .editor-row .offset3, .row-no-response .offset3 {
		margin-left: 0;
		margin-right: 25.83333333075%;
	}
	.row .offset3.sortable-first, .row .offset3:first-child, .row-fluid .offset3.sortable-first, .row-fluid .offset3:first-child, .editor-row .offset3.sortable-first, .editor-row .offset3:first-child, .row-no-response .offset3.sortable-first, .row-no-response .offset3:first-child {
		margin-left: 0;
		margin-right: 24.9999999975%;
	}
	.row .offset2, .row-fluid .offset2, .editor-row .offset2, .row-no-response .offset2 {
		margin-left: 0;
		margin-right: 17.49999999825%;
	}
	.row .offset2.sortable-first, .row .offset2:first-child, .row-fluid .offset2.sortable-first, .row-fluid .offset2:first-child, .editor-row .offset2.sortable-first, .editor-row .offset2:first-child, .row-no-response .offset2.sortable-first, .row-no-response .offset2:first-child {
		margin-left: 0;
		margin-right: 16.666666665%;
	}
	.row .offset1, .row-fluid .offset1, .editor-row .offset1, .row-no-response .offset1 {
		margin-left: 0;
		margin-right: 9.16666666575%;
	}
	.row .offset1.sortable-first, .row .offset1:first-child, .row-fluid .offset1.sortable-first, .row-fluid .offset1:first-child, .editor-row .offset1.sortable-first, .editor-row .offset1:first-child, .row-no-response .offset1.sortable-first, .row-no-response .offset1:first-child {
		margin-left: 0;
		margin-right: 8.3333333325%;
	}
	.row-fluid .thumbnails {
		margin-left: 0;
		margin-right: 0;
	}
	input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width:767px) {
	html[dir="rtl"] {
        .row-grid {
            width: 100%;
        }
		.row {
			margin-left: 0;
			margin-right: 0;
		}
		.row > [class*="span"], .row-grid > [class*="span"], .editor-row > [class*="span"], .row > [class*="offset"], .row-grid > [class*="offset"], .editor-row > [class*="offset"], .row.row-closed > [class*="span"] {
            float: none;
            display: block;
            width: auto;
			margin-left: 0;
			margin-right: 0;
		}
		.row > [class*="offset"]:first-child, .editor-row > [class*="offset"].sortable-first {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

@media (min-width:768px) and (max-width:979px) {
	html[dir="rtl"] {
		input, textarea, .uneditable-input {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

Share this post


Link to post
Share on other sites
Danny

Thanks for sharing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • DonRicardoRVM
      By DonRicardoRVM+
        First of all, sorry for my bad English.  I am developing an ecommeece with wp, woocommerce, PL5 and quickshop, and I need to do some changes in the simple product grid. I want to change the classes of some divs, but I can't find the templates. 
      Also, I change the grid of the category products pages, but I didn't make it correctly.
      This is the cat archive's: http://globosdemar.com/wp/categoria-producto/camisetas-para-ninos-y-ninas/
      Can you help me?
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • ketri
      By ketri
      Hi,

      I noticed that PL5 uses flexbox for it's responsive grid. I think this is awesome. 
      But now there's a project coming in where I know I'll have to support older crappier browsers as well. Any thoughts on this? Should I only use PL5 for project where we're focused on modern browsers? Or should I use custom CSS to insert a float-based fallback grid..? 

      Thanks!
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • janpeeters
      By janpeeters+
      Sorry, I got lost in trying to explain my problem properly. I deleted the contents of this post but can't delete the post itself. I'll report back if I've gotten to the bottom.
×