Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 30, 2022 at 4:52 am #1367043
    navindesigns

    Mockup – https://ibb.co/WBJ7LPk

    Live site – https://gideonfranchise.flywheelsites.com/ – this block is located towards the bottom

    I need a little bit of help with the following:

    1- Align my contents to the bottom (instead of top currently)
    2- Show full image.
    3- Add white overlay with overlay in the background
    4- Add background around the contents with overlay background.

    Thanks

    October 2, 2022 at 9:31 pm #1367348
    navindesigns

    Just an update, I was able to do #3 and #4 but with #4, the text also is transparent and it should be full black

    But I still need help with #1 and #2

    October 4, 2022 at 4:56 pm #1367583
    Yigit

    Hi,

    We are sorry for the late reply!

    1- I edited your Grid Row element and set the minimum height to 500px.

    2- Setting minimum height took care of this one as well because you already set the alignment to bottom

    4- I edited your custom CSS code and changed it to following

    
.staffBio {
 background: rgba(255,255,255,0.6); 
  padding: 10px;
  color: #000000!important;
  font-size: 13px!important;
  line-height: 18px;
}

    Please review your website :)

    Best regards,
    Yigit

    October 29, 2022 at 3:23 am #1370613
    navindesigns

    This looks great. I need one last help, please

    The text bit a light and hard to read.  Can we make it darker? It seems like main background opacity (.imagen-inicio) is also covering the staff bio block.

    How can I bring the staff bio section text to the front?

    October 30, 2022 at 8:35 pm #1370724
    Yigit

    Hi,

    I removed opacity from .imagen-inicio and added following code to bottom of Quick CSS field instead

    
.imagen-inicio::before {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.1);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.imagen-inicio .flex_cell_inner {
  z-index: 1;
}

    Please review your website :)
    Best regards,
    Yigit

    October 31, 2022 at 6:17 pm #1370840
    muuclemens

    Hi there: I got an additional question concerning customization of grid row cells: is there a way to have space between the cells of a grid row? I want to give a background color to the single cells and a border-radius. Additionally the single cells should have a certain space between each other so that they have the look of an playing card. I tried with padding and margin but it didn’t work. Is there a way?

    BR Clemens

    November 2, 2022 at 4:07 am #1371006
    Ismael

    Hi,

    @muuclemes: How many cells or columns do you have in each row? If there are 3 cells for example, you can use the following css code to create spaces between cells.

    #top .no_margin.av_one_third.flex_cell {
    width: 30%;
    display: inline-flex;
    border: 1px solid;
}

#top .av-layout-grid-container {
    width: 100%;
    table-layout: unset;
    display: flex;
    border-top-style: none;
    border-top-width: 0px;
    justify-content: space-between;
}

    You can adjust or replace the selector av_one_third to correspond with the number of cells in each row, av_one_fourth for 4 cells, av_one_fifth for 5 and so on and so forth. If you need more assistance, please feel free to open another thread.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Grid Row Customizations’ is closed to new replies.