Docs

[010mac]

Hallo,

I´m tweaking some last details of my website. I have a problem that I can not center images vertically, inside some stripes of my main page. I attach a screenshot so you know what I mean. That opened laptop image, is too high, can I edit the code so it is centered? I prefer to edit the code, as I already started doing that, and cornerstone changes the page if i edit it with cornerstone, and that is quite annoying.

I just need to center that image vertically. And then center some others in similar stripes.

thanks again!!!

[Christopher]

Hi there,

Please enable Marginless columns option and add vertical-align: middle; in right column’s style field.

Hope it helps.

[010mac]

Thank you for your answer, but, can you please explain me how to do that, or in what part of the code do I have to write what? thanks!!

– How do I activate “Marginless columns”, please?
– In what part of the right column style field do I put that?

If you could please write a more elaborate answer to my problem, not just one line, I would really appreciate it. Otherwise it’s gonna take more time and effort, from my side but also from yours.

thanks.

[010mac]

I will paste here the code I have. It seems duplicated, but it is not, one is used for desktops, the other one is for mobile devices, phones and tables, I gues you know that. Please let me know what should I edit and where. The name of that image is: inside-retina600wide.jpg

Hope you can help me. This is the main home page of the website: http://www.010mac.nl

[cs_section class=”right-text ” style=”margin: 0px; padding: 45px 0px; border-style: solid; border-width: 0px; border-color: #c6c6c6; ” parallax=”true” bg_color=”#ffffff”][cs_row class=”x-hide-sm x-hide-xs ” style=”margin: 0px auto; padding: 0px; ” inner_container=”true”][cs_column class=”center-text ” style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/2″][x_image type=”none” src=”http://www.010mac.nl/wp-content/uploads/2016/02/inside-retina600wide.jpg” alt=”Placeholder” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”man” style=”size: 75%”][/cs_column][cs_column class=”center-text ” style=”padding: 0px; ” fade_animation=”in-from-left” fade_animation_offset=”45px” fade_duration=”750″ type=”1/2″][x_custom_headline level=”h5″ looks_like=”h5″ accent=”true” class=”center-text resp-h mts mbn”]Upgrades [icon type=”rocket”][/x_custom_headline][cs_text style=”margin: 10px 0 20px;” text_align=”left-text”]
<p class=”resp-p man”>We can give a new life to your current Mac by increasing RAM memory, installing a secondary SSD drive, replacing the battery or cleaning the cooling system.</p>
[/cs_text][x_skill_bar heading=”Standard Hard Drive Speed” percent=”9%” bar_text=”50 Mb/s” bar_bg_color=”#dd6a6a”][x_skill_bar heading=”SSD Speed” percent=”50%” bar_text=”525 Mb/s” bar_bg_color=”#9ce084″][x_skill_bar heading=”Double SSD (RAID O) Speed” percent=”96%” bar_text=”1050 Mb/s” bar_bg_color=”#9ce084″][x_button type=”transparent” shape=”rounded” size=”regular” block=”false” circle=”false” icon_only=”false” href=”http://www.010mac.nl/shop/en/29-apple-mac-macbook-imac-mini-pro-air-retina-upgrade-service-rotterdam-ssd-ram-memory-storage-software-hardware&#8221; title=”Upgrade-prices” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””]Upgrade Prices[/x_button][/cs_column][/cs_row][cs_row class=”x-hide-xl x-hide-lg x-hide-md center-text ” style=”margin: 0px auto; padding: 0px; ” inner_container=”true”][cs_column class=”center-text ” style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″][x_custom_headline level=”h2″ looks_like=”h2″ accent=”true” class=”center-text resp-h man”]Upgrades [icon type=”rocket”][/x_custom_headline][cs_text style=”margin: 10px 0 20px;” text_align=”left-text”]
<p class=”resp-p man”>We can give a new life to your current Mac by increasing RAM memory, installing a secondary SSD drive, replacing the battery or cleaning the cooling system.</p>
[/cs_text][x_skill_bar heading=”Regular Hard Drive speed” percent=”15%” bar_text=”50 Mb/s” bar_bg_color=”#dd5f5f”][x_skill_bar heading=”SSD Drive Speed” percent=”90%” bar_text=”525 Mb/s” bar_bg_color=”#9fd677″][x_button type=”transparent” shape=”rounded” size=”regular” block=”false” circle=”false” icon_only=”false” href=”http://www.010mac.nl/shop/en/29-apple-mac-macbook-imac-mini-pro-air-retina-upgrade-service-rotterdam-ssd-ram-memory-storage-software-hardware&#8221; title=”Upgrade-prices” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””]Upgrade Prices[/x_button][x_image type=”none” src=”http://www.010mac.nl/wp-content/uploads/2016/02/inside-retina600wide.jpg&#8221; alt=”Placeholder” link=”false” href=”#” title=”” target=”” info=”none” info_place=”left” info_trigger=”hover” info_content=”” style=”margin: 15px 0 0; width: 75%”][/cs_column][/cs_row][/cs_section]

[Friech]

Hi There,

Did you edit the page outside Cornerstone? Do not do that or else you wont be able to edit the page back it Cornerstone.

To turn on the marginless column, please inspect the ROW of this column and turn on the marginless columns option.

Then inspect the right column and put vertical-align: middle; on its style field.

Hope it helps, Cheers!

[010mac]

yes, I edited out of cornerstone, many times, because I got indications to change texts out of cornerstone, so now I can not use cornerstone indeed. But it’s ok, i prefer it this way, coding the code.

Please let me know if ou can tell me how to edit this code and i will edit it, otherwise I would have to do the whole page again, and eventually it will break again, so better do the code way directly.

[Lely]

Hi There,

In that case, look for the container of the column and then add class marginless-columns. Then on image column style property add vertical-align: middle;

Look for this part:

[cs_row class="x-hide-sm x-hide-xs " style="margin: 0px auto; padding: 0px; " inner_container="true"][cs_column class="center-text " style="padding: 0px; " fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/2"][x_image type="none" src="http://www.010mac.nl/wp-content/uploads/2016/02/inside-retina600wide.jpg" alt="Placeholder" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content="" class="man" style="size: 75%"]

Update to this:
[cs_row class="x-hide-sm x-hide-xs marginless-columns" style="margin: 0px auto; padding: 0px; " inner_container="true"][cs_column class="center-text " style="padding: 0px; vertical-align: middle;" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/2"][x_image type="none" src="http://www.010mac.nl/wp-content/uploads/2016/02/inside-retina600wide.jpg" alt="Placeholder" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content="" class="man" style="size: 75%"]

Hope this helps.

[010mac]

You guys give an awesome support. Kudos for that!!!

One little last question; the vertical align middle code explain its function by itself.

Marginless columns I guess mean also that the columns have no margin, but why that is necesary, just wondering there’s a reason for that, wondering why.

Thanks again!!!

[010mac]

This is the output, now the two colums stick together. Could I set up a margin? and a margin not in pixels but in with percentage?? I tried with pixels on the image, but it’s not very “responsive, for diferent screen resolutions or browser window size.

Thanks!

[Rad]

Hi there,

Marginless is required to enable equal height between columns. How about adding margin to the image?

[x_image type="none" src="http://www.010mac.nl/wp-content/uploads/2016/02/inside-retina600wide.jpg" alt="Placeholder" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content="" class="man" style="margin: 10%;"]

Thanks!

[010mac]

even with margin 25% it makes no difference

[010mac]

maybe it’s margin less columns which cancels the margin?

[Rue Nel]

Hello There,

Thanks for updating in! To resolve this issue, please remove the margin. We will use padding instead. You can make use of this shortcode:

[x_image type="none" src="http://www.010mac.nl/wp-content/uploads/2016/02/inside-retina600wide.jpg" alt="Placeholder" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content="" class="man" style="padding: 40px;"]

Feel free to increase the padding if needed. Please let us know how it goes.

[010mac]

I tried that already, does not work very well with responsive design; that 40px margin can be good at a certain screen resolution, but can be too big for smaller displays…

I just need to center the image vertically really. I could also edit the image file, and make it square, with a transparent background up and down… or maybe just up… But still, center vertically would be ideal.

[Friech]

Hi There,

In that case please add this on your custom CSS on Customizer:

.flex-parent {
	display: flex;
}

.flex-child {
	display: flex;
	align-items: center;
}

Then add this class flex-parent on the ROW. Make sure its the correct ROW, the row that is intended for desktop and hidden on mobile.

And then add this class flex-child on the (left) COLUMN where the image is place.

Let us know how it goes.

Cheers!

[Author]

Posts