Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 10, 2019 at 3:08 am #1088946
    messmeriza

    Hi there,

    I’m try to figure out how wide the columns are for the turquoise area on the homepage http://staging.pointgreyfiesta.net/

    I have placed 4 images and animated numbers. The word WEEKS (animated numbers) gets cut off on a 1440px wide Macbook Pro screen. I have asked in another thread how to change the font size. But ideally I would like it to automatically adjust the width so that it doesn’t scale each column and create so much space in between them.

    Also it’s scaling the Save the Date image and aligns it to the top. Can you please tell me what pixel width it can have (maximum) and how to align all 4 images horizontally centered so that they are not aligned at the top.

    Thanks,
    Carolin

    April 10, 2019 at 6:04 pm #1089211
    Victoria

    Hey Carolin,

    Here is what I am seeing https://cl.ly/75b93fd30cb1

    What is not working for you?

    Best regards,
    Victoria

    April 10, 2019 at 6:47 pm #1089234
    messmeriza

    Hi Victoria,

    I have marked it up: https://cl.ly/0f1012481d92
    – ‘Save the Date’ and ‘Early Bird Carnival Tickets’ images are aligned at top and not centered in the turquoise area. How do align all images in this row horizontally centered?
    – ‘Save the Date’ image is scaled down in size. What width does each column have or how can I reduced the space between the images?
    – The word WEEKS (animated numbers) gets cut off on a 1440px wide Macbook Pro screen. How can I make that column wider so the text doesn’t get cut?

    Thanks,
    Carolin

    April 12, 2019 at 8:20 am #1089939
    Victoria

    Hi Carolin,

    https://imgur.com/a/pUEIG45 The images are aligned, the content on images is at a different height and so it will be very hard to align them for different screen sizes.

    For the countdown please try the following css:

    
.av-countdown-cell-inner {
    padding: 20px 5px;
}

    Best regards,
    Victoria

    April 12, 2019 at 7:40 pm #1090140
    messmeriza

    Hi Victoria,
    it aligns the images to the top of the color section
    https://www.dropbox.com/s/oa8icj3qvk5ifs2/Screen%20Shot%202019-04-12%20at%2010.37.26%20AM.png?dl=0
    but I would like them to be aligned centered horizontally. In the Image Settings I can only specify to align it centered vertically.
    I also scales them depending on the monitor/browser window width. Is there a way to minimize the space between the 5 columns?
    If not what height and width should I make them all so that it aligns them better? I would just include space inside the image.
    Thanks,
    Carolin

    April 15, 2019 at 7:20 pm #1091052
    Victoria

    Hi Carolin,

    Please try the following css:

    
@media only screen and (min-width: 1024px){
    #turquoisecontainer div .av_one_fifth {
        margin-left: 2%;
        width: 18%;
    }
}

    The images have different heights and it’s hard to align them like that.

    Best regards,
    Victoria

    April 16, 2019 at 12:44 am #1091153
    messmeriza

    Hi Victoria,

    what were you trying to achieve with the code above? I don’t see any changes. Though maybe I can only see changes if I make the images (Let’s be Social, Save the Date, etc) larger?
    What width and height do you recommend for the images?

    Thanks,
    Carolin

    April 16, 2019 at 7:24 pm #1091637
    Victoria

    Hi Carolin,

    The last code was reducing the margin between the 1/5 and giving it more width. Just pick one size of those images and make them the same size.

    Best regards,
    Victoria

    April 27, 2019 at 1:47 am #1094845
    messmeriza

    Thanks! You can close this now.

    April 29, 2019 at 6:15 pm #1095401
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘horizontally align Layout Elements in 1/5 layout’ is closed to new replies.