By webdev100 on

Hello,

I have fluid two column display suite page. Left has an image (large) and right has 3 small images in 3 rows. I like to have space between left and right. I did try below. 

.ds-2col-fluid > .group-right {
    float: right;
    width: 50%;
    margin-left:15px;
}

Margin pushes out the group right images to next row. Padding is also not doing right. How can I have a space between left and right region? So it looks good. I am using bootstrap subtheme.

link to the site

Thanks.

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

.group-right should have a 'content' div that you apply the margin to. If you can provide a link to the page I can be more specific.

webdev100’s picture

webdev100 commented

site link is already given. Please see the above link.

nevets’s picture

nevets commented

How about 

/* Limit the width of images so they fit the space */
.ds-2col-fluid img {
   max-width: 100%;
}

.ds-2col-fluid > .group-right div.field {
    margin-left:15px;
}

Without the first rule, the margin will not show.

AndyD328’s picture

AndyD328
he/him/his
Primary language English
Location Lyttelton, NZ 🇳🇿
commented

Beaten by nevets, but I've written it now so here you are:

If you are using LESS with bootstrap then you could use:

.group-left,
.group-right {
  .make-sm-column(6);
}

//This is pretty useful all over the place, esp on responsive layouts, it would fix up your header image on small screens too
img {
  .img-responsive;
}

If you're not using LESS then 

.group-left {
    padding-right :15px;
}
.group-right {
    padding-left :15px;
}
img {
  max-width: 100%;
  height: auto;
}

BlueFusion.co.nz

webdev100’s picture

webdev100 commented

Both worked fine. Thanks a lot.

webdev100’s picture

webdev100 commented

All worked fine before. Now I just changed the layout to bootstrap display suite two columns stacked layout. I am having problem.

#1 // I had this before and it worked.
.ds-2col-stacked-fluid img {
max-width: 100%;
margin:3px;
margin-bottom:14px;
border-top-left-radius: 2em; border-top-right-radius: 2em;
}

How can I have the same styling for the images on the node/6? I can do it using img but I don't want to apply to all images of the site.

# 2 //I had this before it worked.
.ds-2col-stacked-fluid > .group-right div.field {
margin-left:125px;
}

//I had this before it worked.
.ds-2col-stacked-fluid > .group-left div.field {
margin-left:15px;
}

//I had this before it worked.
.ds-2col-stacked-fluid > .group-footer div.field {
margin-left:15px;
}

Now, i inspect the page I don't see any group elements. Can you please help me how can I style the same? What would be the class names?

nevets’s picture

nevets commented

Changing the layout will change the generated html and associated classes.

For the latter part you want something like

.row .col:first div.field {
margin-left: 125px;
}

.row .col:last div.field {
margin-left: 15px;
}

.row:last div.field  {
margin-left: 15px;
}

Note if things are responsive, the last one does not make sense to me.

If you want these to apply on to this page, you will want . page-node-6 .row instead of just .row

For the first part try

.page-node-6 .node img {
max-width: 100%;
margin:3px;
margin-bottom:14px;
border-top-left-radius: 2em; border-top-right-radius: 2em;
}

Note if you fix the issue with images not being responsive you will want to remove max-width possibly.

webdev100’s picture

webdev100 commented

I added the code you provided, it did not do anything. I was looking for space between left and right regions. Also some margin between all the images. After that i inspected the page, i dont even see the code that I added. Cleared the cache too. If you inspect my page, you will notice that bootstrap uses .col-sm-6 div classes. I am just confused.

webdev100’s picture

webdev100 commented

Can you please help?