Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 21, 2019 at 1:44 pm #1069937
    CodeSamurai

    Hi,

    I’m using pricing tables for my website. I’ve added images to the heading row so that row has text and images for each column. When I added images the columns became uneven. Originally I had the middle column set as a highlight column which worked. The first column was at the normal height, the middle column was set up higher on the page, and the third columns started at the same height as the first column. After adding images to the heading row each column now starts in a different position.

    Is there a way to get this back to how it’s supposed to work while using images within the heading row? I’m using custom CSS to define the center column’s background color, but even if I remove that custom CSS I still have that problem.

    Any thoughts? Thanks!

    February 26, 2019 at 4:26 pm #1071861
    Vinay

    Hey CodeSamurai,

    Thank you for contacting us and sorry for the delay.

    It’s difficult to interpret without actually seeing the issue. Could you please create a test page with the image in the pricing table so we can see the issue on your site. Seeing the issue will help us to provide you with an accurate solution.

    Thank you for your understanding.

    Best regards,
    Vinay

    February 27, 2019 at 1:34 pm #1072268
    CodeSamurai

    Hi Vinay,

    I updated the page so that you can see what I’m referring. The page for the example is listed within the private content. The pricing tables are located closer to the bottom of the page.

    Thanks for the help.

    March 4, 2019 at 6:26 pm #1074469
    CodeSamurai

    Hi,

    I haven’t received a reply in a while. Will anyone be able to take a look at this? Thanks!

    March 5, 2019 at 12:47 pm #1074849
    Ismael

    Hi,

    We would like to apologize for the late response. The line breaks are probably causing the issue. Have you tried removing those br tags, particularly the ones in the middle column?

    Best regards,
    Ismael

    March 5, 2019 at 3:36 pm #1074916
    CodeSamurai

    Hi Ismael,

    I remove the breaks for testing and that does in fact fix the column placements. However, by removing the breaks the text and image then is placed on the same line which is not what I want to do. I want the images to be on its own line. For example, within the middle column I want “most popular” to be the top line, the image on the 2nd line, and then “wordpress hosting” to be the 3rd line within that table cell.

    If I can’t use breaks then how can I do this?

    Thanks!

    P.S. I put the breaks back to the columns for now so that the text and images are on separate lines again.

    March 6, 2019 at 5:19 am #1075263
    Ismael

    Hi,

    Thanks for the update.

    Use this css code to move the image on its own line.

    .first-table-item > img {
    clear: both;
    display: block;
}

    Don’t forget to remove the line breaks.

    Best regards,
    Ismael

    March 6, 2019 at 2:36 pm #1075507
    CodeSamurai

    Hi Ismael,

    Thank you for your continued help. I added the code and while that moved the images to its own line the pricing table columns are still not correct. If you go back to the page I sent earlier, you will see that the middle column still is lower than the other two columns while the first and third columns also have different positions. Along with that, the CSS I added puts the images left aligned instead of the center of the cells.

    If altering the CSS you sent is the answer, I would also need to be sure that the images are centered, the middle column is above the other two columns as it’s the highlight column, and the first and third columns are at the same position.

    Any other ideas?

    Thanks!

    March 10, 2019 at 1:38 am #1076868
    Mike

    Hi,
    Sorry for the late reply, To center the images in the middle of the tables, please try this css:

    .pricing-table .avia-heading-row .first-table-item img {
margin: auto !important; 
}

    Best regards,
    Mike

    March 10, 2019 at 1:41 am #1076869
    CodeSamurai

    Hi Mike,

    While centering the image is appreciated my original question hasn’t been answered yet. I need to fix the position of all three columns per my original question. I need the first and third column to be at the same starting position and the center column to be the “highlight” column where it is placed above the other two. By having an image within each column that ruins this placement.

    How can I fix this??

    March 10, 2019 at 6:05 pm #1077053
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.home #av_section_5 .avia-table div {
    vertical-align: top !important; 
}

    Then clear your browser cache and check.

    Best regards,
    Mike

    March 11, 2019 at 4:21 pm #1077398
    CodeSamurai

    Perfect, that worked! Thank you for the help to fix this, I appreciate it. This can be closed.

    Thanks again!

    March 11, 2019 at 11:19 pm #1077564
    Jordan Shannon

    Hi,

    I’m glad this was resovled. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Pricing table column height are uneven when heading row has images’ is closed to new replies.