• 0
Sign in to follow this  
Followers 0

Using the New PL Grid System - Positioning Elements Correctly

Question

Posted · Report post

Thanks to the tutelage from @beardedavenger I have created my first Grid system. I must say that it works quite well: http://cl.ly/2k2f0y1S0b3N0Y1o3P0k Here is the code I have implemented: http://paste.pagelines.com/6bw and associated CSS: http://paste.pagelines.com/7jx Some questions: 1) I needed to move the curly bracket over to the left. So I used a negative margin. Not sure if this is the best way to accomplish things? What are my options? 2) I use these 2 properties for the image on the right:

max-width: 100%;
	height: auto;

Should I be doing anything else? 3) Is there a way to set a maximum width of "

" (for example)? Guys: This is very cool stuff. Great job!

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

1) Negative margins are probably the best way to accomplish it. It's what I would do. 2) I don't think anything else is needed, unless you're looking for something responsive in which case @beardedavenger is the resident guru on that. (And even if that's what you want, your code still looks right.) 3) .span2 {max-width: 50px;} :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you (again, and again & again) @simple_mama. I am happy with the code also. I do realize that more is needed to make the site responsive - just drag it over to the left and you will see what I mean. I am hoping that @beardedavenger will weigh in on this aspect of the discussion. I did find this great article by Chris Coyer: http://goo.gl/RE1PF PS I understand your explanation on point number 3. The problem is what happens if I only want column 50pxs. wide?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

For the column, are you asking for it to be 50px no matter what (whether the browser window is resized or not)?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@catrina: I figured it out by approximating my columns widths, then using negative margins as suggested by @simple_mama: http://cl.ly/3t0i3N0s1m2j0h0t3w3f What do you think? I still need to handle the responsive stuff. But I am seriously thinking of using WP Touch Pro as there is just too much payload on some of our pages.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@WebWerx Just a thought... It's hard to be responsive when you're setting margins with pixels and not percentages. I hope my random thoughts lead us to a solution somewhere over the rainbow. Cheers!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Howdie @hperkins (Henry)! Good thought --- and I know you are 100% correct. Any tutelage you could provide on the topic would be great... It really would. I had tried to get Nick to weigh in as Jenny had mentioned he was the in-house responsive design person.... to no avail. Did you look at the CSS I implemented? I am hoping to make the site "responsive". But me thinks that I have too many assets to load anyways.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sup, So yeah your special background is gonna be tough to get right and responsive. But really, the negative margins are doing more harm than good here. I'd prolly put that bracket and that text as an image. Only cause when the grid goes responsive, each span goes 100%, which means that bracket glyph goes under. Unless we hack with some css foo. Wish I could have spent some more time on this but maybe this will get you going in the right direction. CSS resets your markup to be a bit better and more semantic. Queries to do some responsive tricks. You could probably center all that stuff on the query if you want, but gots to run. http://paste.pagelines.com/4mz Replace all your custom content box stuff with above Nick

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Holy Moley @beardedavenger: I gotta look at this in detail. Putting the bracket as an image works for me. The text no as we would loose the SEO value on a page that is content scarce in the first place. I do appreciate the time you spent helping out though. What about @hperkins ' comments about percentages?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Henry's right. Fixed numbers are contrary to the concept of responsiveness as they set a predetermined width or height to the element. In a mobile view, those fixed sizes remain static, while percentage sized things can grow, shrink or move as needed.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I just wanted to add to this and give a little SEO insight. :) If you're worried about creating an image and ruining the SEO value, you can get around the system. Create the image and do what was mentioned above. Leave your text in there as is but add a [code]YOUR TEXT[/code] to it. Google will still index this text, but it don't display on the page. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

WebWerx, I have given you the solution to fix this, which I dont even see on your site. Henry is not a developer, so that was a complete guess. Percentages, fixed widths, whatever, your negative margins will not work with a responsive layout. Also, moving those 3 words, into an image, is not going to destroy your SEO joo joo, guaranteed.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0