Jump to content

Archived

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

Kedmyster

Grid system in RTL

Recommended Posts

Kedmyster    1
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    1,327
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    1
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    1,327
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.
×