Jump to content

Archived

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

bloom1creative

grid-row

Recommended Posts

bloom1creative+    3
bloom1creative

Hi chaps, me again!

 

I think I should come and work for you guys as I think I have encountered everything possible about this framework!

 

So we have been querying the Sections and the Section IDs, but Chrome and Firefox seem to add an extra row wrapped around these with the classes "row" and "grid-row" added, after which researching, w3c says that no browsers even support the "grid-row" class.

 

Any way to turn this off?

 

Thanks guys

 

Please see here : http://screencast.com/t/u7KLPPEiEzL2


Many thanks

 

Rob1n

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Erwan has hit the nail on the head here. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
bloom1creative+    3
bloom1creative

Thanks for the replies guys.  Chrome doesnt use them which is why I was confused.

 

So really they are hugely untidy and there is no way to 'directly' target them, other than applying an overall nested style to the Section that they are within?  Been using bootstrap for a year or so know so I am familiar with the 'row' class, but grid-row I have never come across.

 

Thanks


Many thanks

 

Rob1n

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

To my knowledge Bootstrap v2 which is used in DMS doesn't use any classes called .grid-row. Bootstrap v2 uses the following:

 

.row 

.row-fluid

 

The grid row class you're referring to is used by the DMS editor to create your columns as far as I know. Also what do you mean it doesn't display in Chrome, it does.

 

http://d.pr/i/IRza


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bloom1creative+    3
bloom1creative

Yeah this is what I thought too Danny as I've used it for a fair while now.  I accept this is a DMS class, that's fine.

 

It makes targeting it really awkward and fiddly, I assume I would have to target the parent section id of the 'grid-row' and then use :nth-child() and select the number of the one I require?  Some of widgets I need to target need to be 50% and some 100% at mobile, so it's vital that I can target a certain widget's 'grid-row'.

 

I trust this makes sense, it's also a bit of a pain that newly added widgets won't automatically apply my class as the 'grid-row' is the un-targetable parent above.


Many thanks

 

Rob1n

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Why do some widgets need to be 100% and some 50% on a mobile device, shouldn't they all be 100% ?

 

Having an area only 50% on a mobile device would probably be a plain to read.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bloom1creative+    3
bloom1creative

Yeah I mean 480px - 767px sorry mate, which is tablet and the widgets look ace at 50% side by side until 480px when I wish them to stack.  I have targeted the class no problems, it works a treat in the Chrome Explorer - when I add to the LESS though I get nothing, almost as thought the grid-row cannot be targeted like regular css.

 

It could also however be that my LESS isn't compiling correctly as I suspect.

 

#plcolumn90e950 .pl-section-pad .pl-sortable-column .grid-row:nth-child(1) is what I have had to use to simply target my widgets as they are dynamically wrapped by the DMS lol - yay...


Many thanks

 

Rob1n

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Why not just use the widgets class or ID and just ignore the DMS row grid-row div ?
 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bloom1creative+    3
bloom1creative

Because the DMS grid-row is outside of all of my targetable areas.  It's dynamically added upon saves. and means that 50% width won't apply when nested inside a 100% grid-row / row class


Many thanks

 

Rob1n

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

What sections are you using and can you provide a concept image of what you want to achieve please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • jagipson
      By jagipson+
      We had this site on our cloud 9 server and moved it to a Amazon Web Service server using Cloud Front and now the Editor on chrome is missing just says USE GOOGLE CHROME TO EDIT WITH DMS. Have tried multiple computers and same results. Any solutions why we would be have this problem?  Won't work on any page.
      http://www.viaglobalgroup.com/
      Thanks
       
      Matt
      @Danny @Andrew 

    • bnapoli
      By bnapoli+
      On my site www.modishmel.com I'm seeing the "blog post title" within the "pins" plugin section breaking words into multiple lines. See screenshot attached.
      Only seeing it in Firefox. Can you help?

    • abuzzelli
      By abuzzelli+
      Strange issue popped up...this site's header http://pattimhall.com looks right in all browsers except firefox. This is what it should look like:
      https://drive.google.com/file/d/0B49uWjV65L5RTGdHSFdsbzBDbTg/view?usp=sharing
      This is what it looks like instead:
      https://drive.google.com/file/d/0B49uWjV65L5RVTVLbnA5aUowWDQ/view?usp=sharing
      Any idea what's going on here?
    • richardjacruz
      By richardjacruz+
      I noticed that the cached version of the website from a Google SERP has broken CSS:
      http://webcache.googleusercontent.com/search?q=cache%3A1uyPM2gXGG0J%3Astevensoncrane.com%2F+&cd=16&hl=en&ct=clnk&gl=us
      Any idea why? The site looks fine elsewhere.
      Also, when using the Web Developer Toolbar in Mozilla Firefox, there are a BUNCH of warnings regarding CSS. I'm wondering that's the problem with the Google cache.
      In a prior post, I had experienced similar "breaking" of the CSS, but that was due to some errors in DNS. I thought we resolved all of that, so this perplexes me.
      Thanks,
      Rich
×