Vertical align in the same wrap

jumptoweb · June 2016

Hi, check this link http://abbia.amysbook.info/en/services/, on the sections with image to one side and a red background to the other, I want to center (vertically) the text on the red section. How can I do that?

Albert · July 2016

Hi,

this can be done with padding css. So you need to set class name for the columns where you want to add this padding first and then create css code to move the content to the middle.

jumptoweb · July 2016

please, can you help me with that?

Albert · July 2016

Sure, we could but you need to set class name for the columns inside which you want to move this content. If you do this, let us know so we can have a look on it once again and prepare some css.

jumptoweb · July 2016

OK, thanks!

Let's focus on the first row: Consultant Engineer

the column with the image has a class: ce-image

and the column with the text: ce-copy

let me know if that is what you need to help me

Albert · July 2016

Ok. So to move the content of ce-copy class down, please use the following css:

.ce-copy {
    padding-top: 80px;
}

jumptoweb · July 2016

but what happen if you are seeing that page in a mobile? tha padding-top will vary, and also if you seeing it in an small device/screen

Albert · July 2016

If you don't want it on mobile, just wrap above css into right @media only screen. More details about it you can read on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Vertical align in the same wrap

Comments