Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 17, 2015 at 1:56 pm #537270
    bobo

    Hi There, I’m using the advanced layout editor to design my page layout and i have run into a limitation of style the page.

    1) Am using the Grid Row to display a fit full screen background, I have manage to do that by adding a custom CSS :)

    2) I added 2 Columns inside the Grid Row, and i wanted to center the 2 Columns to the center and resize to fit my need but i couldn’t do that, The option available on the 2 Columns only allows me to use the Padding left and right. If i had the option to add the class ID that would be great I then would of achieved my goal. however the Grid Row gives you the option to add the class ID, Why not with the Columns?

    Please see the image below to help you understand my goal. Thank you
    Click here to see the image layout

    The Blue is the Background full screen using the Grid Row helps, but adding the 2 Columns inside the grid row wasn’t auto displaying on the center and i had no option to resize the width .

    • This topic was modified 9 years, 1 month ago by bobo.
    November 17, 2015 at 5:13 pm #537431
    bobo

    My solution would be solve if i edit the /themes/enfold/css/grid.css
    removing this line 273 #top .no_margin.av_one_fifth [ /* width: 20%; */]

    I’m afraid this may affect other grid layouts even if i do it on child theme, since i am using the same class name. is it possible to create a class name so i can do it that way?

    • This reply was modified 9 years, 1 month ago by bobo.
    November 17, 2015 at 5:21 pm #537450
    Elliott

    Hi boboo!

    Send us a link to your page and we can give you some CSS to target each column. You can set your reply as private if you wish.

    Regards,
    Elliott

    November 17, 2015 at 11:48 pm #537706
    bobo

    Thanks Elliott please see the Private Content

    • This reply was modified 9 years, 1 month ago by bobo.
    November 18, 2015 at 1:33 pm #538049
    bobo

    Hi Elliot below is a basic CSS code that I think will do the trick but dasn’t look right on different devices it only looks ok on desktop…
    I did this test using google chrome css editor you probably won’t see this as i never actually added on the theme style.

    /*This goes on the text part, that i needed to add the Width. plus this is a element so their was no way i can edit this on the style*/
    element.style {
    padding: 150px 50px 0px 50px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 0px;
    width: 34%;
    }

    /*Here i was trying to center the whole Div Content to the center not sure if did the right thing using the same class name, if you view it as a mobile you will see it brakes apart*/
    .flex_cell_inner {
    display: block;
    position: relative;
    margin-left: 340px;
    }

    Thanks
    Bobo

    November 19, 2015 at 10:44 pm #539254
    Elliott

    Hi!

    Well your page looks different from your screenshot but I think I see what your talking about. Your wanting the columns to be the same width on smaller screens right? You can use this CSS to make sure they are 100%.

    .avia-image-container { width: 100% !important; }
@media screen and (max-width: 767px) { 
.responsive #top #wrap_all .av-flex-cells .no_margin { padding-left: 0px !important; padding-right: 0px !important; }
}

    Cheers!
    Elliott

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.