How can I code the text via css to align center vertically without using padding? As of now, I would have to code all this for laptop, tablet, and mobile in order for the columns and the text to be responsive and re-size automatically. Is there an easier way? http://www.xtd.lkg.mybluehost.me/schools/
Try creating the Image and Text Grid using the Rows/Columns and not using any custom css to alter the layout as only that way they would remain responsive.
- The Image needs to be inside a smaller column and there is no need to set a width on it using CSS.
- For the Text use the Centered Column Options and remove the negative margins .
I did as you suggested but I cannot get the text to vertically align or for the image row to just be 125 px wide. Everything divides by quarters equally. How do I adjust this?
I want the first row to be responsive but match the look of the second row which is styled with CSS and is not responsive.
Unfortunately, this is not possible as the Page Builder Rows and Columns use a Specific CSS Grid with defined rules that have to be used in a certain order.
Adding css snippets to alter the grid would not work unless the Html structure is set up correctly.
We would suggest using the Page Builder only and not use any custom css to recreate the layout you need that way it would remain fully responsive.
How can I code the text via css to align center vertically without using padding? As of now, I would have to code all this for laptop, tablet, and mobile in order for the columns and the text to be responsive and re-size automatically. Is there an easier way? http://www.xtd.lkg.mybluehost.me/schools/
.column-header { margin-top: 50px !important; margin-bottom: 30px !important; width: 1100px !important; margin-left: auto; margin-right: auto; }
.column-schools h1 { padding-top: 45px; line-height: 1.2; font-size: 28px; margin-left: -110px; }
.column-schools-2 h1 { padding-top: 25px; line-height: 1.2; font-size: 28px; margin-left: -110px; }
Hey Again,
Try creating the Image and Text Grid using the Rows/Columns and not using any custom css to alter the layout as only that way they would remain responsive.
- The Image needs to be inside a smaller column and there is no need to set a width on it using CSS.
- For the Text use the Centered Column Options and remove the negative margins .
Thanks
ThemeNectar Support Team
But will this vertically align the text? I want the text vertically aligned and flush left
I did as you suggested but I cannot get the text to vertically align or for the image row to just be 125 px wide. Everything divides by quarters equally. How do I adjust this?
I want the first row to be responsive but match the look of the second row which is styled with CSS and is not responsive.
http://www.xtd.lkg.mybluehost.me/schools/
Hey Again,
Unfortunately, this is not possible as the Page Builder Rows and Columns use a Specific CSS Grid with defined rules that have to be used in a certain order.
Adding css snippets to alter the grid would not work unless the Html structure is set up correctly.
We would suggest using the Page Builder only and not use any custom css to recreate the layout you need that way it would remain fully responsive.
Let us know if you need any help understanding how the Page Builder works. Also see: http://themenectar.com/docs/salient/page-builder-overview/ .
Thanks
ThemeNectar Support Team