Overlaping an image from one section to another

Developer Support CMS Development
1

Hi,

I have two questions. I am always seeing pages with images that overlap from one row to another. Such as in the example below:

SlimSr2003_0-1620344287719.jpg
SlimSr2003_0-1620344287719.jpg708×540 113 KB

I had thought to do this using a negative margin using CSS but no matter what i find online for this it doesnot seem to work. Although it seems like it should be simple. So I am hoping the experts here can help.

Second question has to do with vertically centering a rich Text module in a row. I was able to accomplish this with these pieces of CSS:

.rowVertcenter .row-fluid .span3 {
display: table-cell;
float: none !important;
vertical-align: middle;
}
.textVertcenter > div {
display: flex !important;
align-items: center;
justify-content: center;
}
.textVertcenter > div > span {
width: 90%;
height: 100%;
}
.modulemargin {
margin-left:30px;
}

but now it seems to have stopped working. So again, I am asking the experts here for help as I am at a loss.

Thanks In Advance

Scott

2

For overlapping images, using positioning would be your best bet. Either relative to itself e.g. position: relative; top: -100px; or absolute and relative to its parent e.g. give parent position: relative; and then the image position: absolute; top: -100px;

For your second question, can you please provide a link so we can give specific help?

3

Hi piersg,

Thanks for the insights in question one. I will give it a try and see what I can come up with.

For the second question here is a link to the landing page that uses the Template: http://info.yeshealth.com/lp-time-sign-up

I got the text to center when it is on a larg screen but when i look at it on a mobile scree the break points for the images and text are not right. So I think that is what i truly need help on.

Anything insights you can provid will be greatly apprecaiated.

4

I would use flexbox and do this:

.rowVertcenter > .row-fluid-wrapper > .row-fluid {
 display: flex;
}
.textVertcenter>div {
 display: flex !important;
 align-items: center;
 justify-content: center;
 height: 100%;
}
.textVertcenter>div>span {
 width: 90%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
@media (max-width: 768px) {
 .rowVertcenter > .row-fluid-wrapper > .row-fluid {
 flex-direction: column;
 }
 /* If you want to re-order the text so it's above the images on mobile add this */
 .rowVertcenter > .row-fluid-wrapper > .row-fluid > .span6:not(.textVertcenter) {
 order: 2;
 }
}