Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 26, 2021 at 4:56 am #1326429
    navindesigns

    Hi,

    I am having a little bit of issue building this layout out and was hoping if you guys can assist.

    Mockup. – https://ibb.co/Twcv09F
    My site – http://alexandere24.sg-host.com/

    Towards the middle of the page there is a 3 column section called “Why Concierge Vegas?”

    I need help help with building out first column to look like my mockup. I have all the elements on there but there is some alignment issues in trying to overlap the white section a little over the image.

    Thanks

    October 26, 2021 at 8:04 am #1326444
    Ismael

    Hey navindesigns,

    Thank you for the inquiry.

    You can add two rows with 3 columns. In the first row, add the images and icon boxes in the second row. You can then pull the second row upwards and make it overlap with the first row by applying negative top margin to the columns. To make the columns in the second row smaller or thinner than the rows in the first column, apply a padding to them or control the width using custom css.

    Best regards,
    Ismael

    October 26, 2021 at 6:13 pm #1326532
    navindesigns

    But this will not stack properly on mobile

    All the images will appear first – see top block – http://alexandere24.sg-host.com/

    The solution I had (bottom block) was better but I do not know how to make the bottom section overlap the image (meaning the white background should be on top of bottom of the image, the white background is going behind the image) – http://alexandere24.sg-host.com/

    October 28, 2021 at 2:19 am #1326747
    navindesigns

    So I was able to get this to work for the most part

    You can take a look at the “Why Concierge Vegas?” section – http://alexandere24.sg-host.com/

    The only issue now is that the first column is not even at the top with the other two columns

    October 28, 2021 at 11:26 am #1326799
    Ismael

    Hi,

    Thank you for the update.

    You can apply a negative top margin to pull the columns upward. Edit one the columns containing the text block and enable the Custom top and bottom margin option in the Row Settings > Row Margins toggle. Apply a negative pixel value (e.g -100px) to the Margin-Top field and make sure that the Apply the same value to all? option is not enabled or is not ticked.

    Best regards,
    Ismael

    October 28, 2021 at 3:01 pm #1326863
    navindesigns

    I think something from the theme is causing that un-even height.. The bottom section is fine. It is the top of the columns is where the gap is (2nd and 3rd columns are a bit lower)

    Home

    October 29, 2021 at 4:00 am #1326907
    navindesigns

    Here is my screenshot highlighting the issue https://ibb.co/VJm3Tw0

    why is the first column height different from the column 2 and 3 when they are all sharing same code

    October 29, 2021 at 11:29 am #1326974
    Ismael

    Hi,

    Thank you for following up.

    The images after the first one are wrapped inside paragraph tags, which has a default margin by default. Try to edit the first column, and wrap the image inside a paragraph tag manually, or edit the other columns and make sure that there are no extra space before and after the img tag to prevent WP from autogenerating the paragraph tags.

    <img class="card-img-top lazyloaded" src="http://site.com/wp-content/uploads/2021/10/homewhy02.jpg" data-src="http://sit.com/wp-content/uploads/2021/10/homewhy02.jpg" alt="Card image cap"><noscript><img class="card-img-top lazyload" src="http://site.com/wp-content/uploads/2021/10/image.jpg" alt="Card image cap" /></noscript>

    You can also remove the paragraph margin with this css code.

    .card p {
    margin: 0;
}

    Best regards,
    Ismael

    October 30, 2021 at 3:23 am #1327055
    navindesigns

    Thank you. That works. I am all set!

    October 30, 2021 at 7:43 pm #1327106
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Assistance Building A Layout’ is closed to new replies.