Jump to content

Archived

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

quintinm

Aligning items to the bootstrap grid

Recommended Posts

quintinm

Hello DMS2 people, hope you are all well.

I am hoping GetMeWebDesign or anyone who has done this before can give me some help here.

I know it is not standard DMS, but i am sure someone else must have wondered about this too.

 

I am a bit unsure as to how to align items more accurately in DMS than the arrows at the top of the elements ( <12/12> ).

They jump in such big increments so i need to find out the best way to adjust them more accuratly - possibly using padding / margins?

 

As i understand it, the bootstrap grid is 12 columns and the spacing between each of them.

 

If i design a website based on that grid with a sidebar and main content area and didn't want the text within the columns touching the edges, one way would be to make the text within the column narrower and make sure it was centered in the column - therefore space on either side.

But what if that spacing is too much?

Then i assume i would add padding left and right.

 

I tried that by adding 20px of padding in the inline styling just to test it and it looked good in the editor in Chrome, but in FireFox it obviously made the text element "wider" than the space and pushed the whole column down to the next row.

 

So i am a little unsure as to how to proceed.

 

Attached is the layout i want to achieve.

At the top i have overlayed the bootstrap grid (Used by DMS)

below that you can see how i want to position the contents in both columns.

 

Left column:

29px padding on the left and right of the navigation

 

Right column:

Background image

29px padding on the left and right of the text

 

Please could someone let me know if this is possible and how i can go about doing it.

Share this post


Link to post
Share on other sites
greenfly

Thank you for the detailed outline of the problem 

 

Could we have a link to your site please? 


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
quintinm

Hello Martin Davies,

 

Just to recap what i want.

- I want to place a background image that will run behind the main content area.

- I want the main content to be about padding-left 25px and ideally padding-right 25px, failing that, it must line up with the right hand side edge of the red blocks. This would mean the wp content loop would have something like this padding:0 25px 0 25px;

 

Here are the options i have already tried.

 

The site is in maintenance mode - the workaround link is http://www.cube4u.co.za/dmscheck, then you can view the following pages with different options:

 

Using the fixed background:

http://www.cube4u.co.za/about-us/

 

Pros:

- extends the full depth of the content area

 

Cons:

- As the background is fixed - when you resize the browser window it stays in place and does not resize with the other elements.

- If i try to make the wp content loop line up with the edge of the red block, it looks fine in chrome but in preview mode the block is pushed down one row as it is too wide so i have to make the wp content loop narrower.

 

 

 

 

Using the background placed into the WP contentloop:

http://www.cube4u.co.za/services/

 

Cons:

- If the content in the column is short - it doesn't stretch the full depth of the area. I don't know how to reduce the depth of that space or extend the background to fill.

- If i want the content to line up with the right hand edge of the page it looks fine in chrome until i take the preview off, then it pushes the content down to the next row

 

 

 

 

Using the background placed into a column containing the WP content loop

http://www.cube4u.co.za/products/

 

PRO's:

- Content loop does not get pushed down to the next row

 

Cons:

- If i want the content to line up with the right hand edge of the page it looks fine in chrome, the content runs over the border on the right.

- If the column is short - it doesn't stretch the full depth of the area (See the space under the grey background)

 

 

I really don't know how to solve this or if it is solvable with DMS.

 

Share this post


Link to post
Share on other sites
greenfly

HI quintinm

 

Left column:

29px padding on the left and right of the navigation

 

Right column:

Background image

29px padding on the left and right of the text

 

 

Have you tried adding a unique custom class and then the 29px padding via Custom CSS? 

 

With Regards this http:


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
quintinm

Martin, i have three different options on those three different pages...

each do different things and yes - i have custom classed with the CSS.

Sorry, maybe i should have provided more info for the above so i have proivided it below.

 

I need to know how i can add padding on the left and right without it causing the contentloop area to push to the next row.

The options i have tried doen work so i need help from the DMS experts.

 

 

Using the fixed background:

http://www.cube4u.co.za/about-us/

.middle-content .pl-area-wrap {
background-image: url("http://www.cube4u.co.za/wp-content/uploads/2014/06/background-main.png");
background-position: 290px 0;
  background-repeat: repeat-y;
}

Pros:

- extends the full depth of the content area

 

Cons:

- As the background is fixed - when you resize the browser window it stays in place and does not resize with the other elements.

- If i try to make the wp content loop line up with the edge of the red block, it looks fine in chrome but in preview mode the block is pushed down one row as it is too wide so i have to make the wp content loop narrower.

 

 

 

 

 

 

 

 

 

Using the background placed into the WP contentloop:

http://www.cube4u.co.za/services/

.bg-in-wploop 
{
  background: url("http://www.cube4u.co.za/wp-content/uploads/2014/06/background-main2.png") 0px 0 repeat-y;
  padding:0 0 100px 25px;
}

Cons:

- If the content in the column is short - it doesn't stretch the full depth of the area. I don't know how to reduce the depth of that space or extend the background to fill.

- If i want the content to line up with the right hand edge of the page it looks fine in chrome until i take the preview off, then it pushes the content down to the next row

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Using the background placed into a column containing the WP content loop

http://www.cube4u.co.za/products/

.loopholder {
  background: url("http://www.cube4u.co.za/wp-content/uploads/2014/06/background-main2.png") 0px 0 repeat-y;
  padding:0 0 100px 25px;
}

PRO's:

- Content loop does not get pushed down to the next row

 

Cons:

- If i want the content to line up with the right hand edge of the page it looks fine in chrome, the content runs over the border on the right.

- If the column is short - it doesn't stretch the full depth of the area (See the space under the grey background)

 

 

 

 

Share this post


Link to post
Share on other sites
quintinm

Basically, all the options above are variations, but they all have issues.

If i make the wp content loop extend to the right edge of the red, it pushes to the next row because of the extra padding.

What i need to know is how to i get around that?

 

hope that is clearer.

 

Have a great weekend.

Share this post


Link to post
Share on other sites
quintinm

Martin Davies, who from pagelines should i expect to be answering these forum posts?

 

I really need some answers here as to the functionality of DMS2 when it comes to padding and alignment etc - i would have assumed that this would have been answered already but it has been 6 days since i first posted it and thereafter provided further explanation.

 

How do i go about getting a response from pagelines about this?

I don't want to compromise the design and want to see how i can push DMS2 to design other websites that don't all look the same, but if i cannot get any help then they will all look the same and that is a pity.

I was hoping DMS2 would be a platform to deliver fairly custom sites, but without the help i am really just being bogged down at the moment by a lack of feedback.

 

If you know who i should be asking please let me know so i can get some answers - i cannot keep the site on hold for a week because i am not getting answers.

 

Thank you.

Share this post


Link to post
Share on other sites

×