Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 30, 2015 at 9:43 am #511235
    dvwdj

    Hi,

    I want my homepage to show a grid layout of my articles, and two sidebars (left and right)
    The sidebars are in the grid row, in these three columns: 1/4 1/2 1/4
    I set up the “blog articles” as a grid layout, with 3 columns and 9 articles. This works fine, but there is a lot of padding between the article photos. How do i decrease this padding to 10px?

    Grid layout

    – The space between the 1/4, 1/2 and 1/4 column is also too big, how do I decrease this padding to 20px?

    – When I resize the browser to a tablet size, the grid layout automatically decreases the size of the images. When using a phone sized browser, the images are shown in 1 column, instead of 3. Can this be achieved on the tablet? So instead of 9 very small blog articles in a 3 column grid, 9 articles in a 1 column grid as shown on a phone.

    Tablet size
    Phone size

    September 30, 2015 at 10:16 am #511281
    Rikard

    Hey Deborahvwdj,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    September 30, 2015 at 10:38 am #511293
    dvwdj

    Hi Rikard,

    Unfortunately this is still a draft, since i want to change the existing homepage. I can provide you with a temporary account, so you can view it.

    October 1, 2015 at 5:10 am #511925
    Rikard

    Hi,

    Thanks for the login, please try this in Quick CSS to decrease the padding:

    .page-id-6059 .flex_cell {
    padding: 20px !important;
}

    About the tablet view; so that I understand you correctly, you want the same view on tablet as on phone?

    Regards,
    Rikard

    October 1, 2015 at 4:31 pm #512257
    dvwdj

    Thanks Rikard, it worked, the padding between the columns is decreased.

    I want the tablet view to be the same as the phone view, because when viewing the site as tablet, the photo’s in the middle column are too small to see any details. Unless there is a way to decrease the padding between the photo’s in the center column. (Take a look at the screenshot below)

    Is it possible to decrease the padding between the photo’s (red arrow) to 10-20 px?
    Also, the photo’s show a background color, instead of being stretched to the border. Is it possible to show the text (title) in a white box with an border around it?

    screenshot

    October 2, 2015 at 6:24 am #512548
    Rikard

    Hi,

    Please try the following to decrease the padding further:

    .page-id-6059 .avia-content-slider .slide-entry {
    padding: 0px !important;
}

    I can’t see any background colour on my end though, in what browser are you seeing that?

    Try the following to control the wrapping for tablets:

    @media only screen and (max-width: 990px) {
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry {
    margin-left: 0 !important;
    width: 100% !important;
}
}

    You might have to adjust the value 990 to a value of your liking.

    Thanks,
    Rikard

    October 6, 2015 at 12:32 pm #514333
    dvwdj

    I use Chrome, on a windows laptop. It looks like the images arend stretched to fit into the block. I think that’s the reason why I see it. Is it possible to stetch the image to fit the block?

    October 7, 2015 at 10:13 am #515064
    Andy

    Hey!

    it looks like this to me: http://i.imgur.com/W0HECGC.png
    So your images are stretched now for me. Please clear browser cache and hard refresh a few times.

    Regards,
    Andy

    October 8, 2015 at 12:38 pm #515724
    dvwdj

    Hi Andy,

    Unfortunately that’s not the page we’re discussing. I posted the link a few messages earlier, but I’ll post it again, including username and password.

    October 9, 2015 at 7:52 am #516196
    Rikard

    Hey,

    I’m not sure what you mean by stretched to fit into the block? Could you try to clarify that a bit please, a screenshot highlighting it would likely bring more clarity for us. I just checked your site and it looks good on my end, but I don’t know what you have in mind.

    Regards,
    Rikard

    October 9, 2015 at 9:17 am #516246
    dvwdj

    Hi Rikard,

    Please take a look at this screenshot:
    Screenshot

    The image shows a light blue background, and isn’t aligned properly with the white box below the image. I want the image and white box to be the same width.

    October 9, 2015 at 12:52 pm #516387
    Yigit

    Hey!

    I could not reproduce the issue on my end as well. Can you please try adding following code to Quick CSS 

    a.slide-image { background: transparent !important; }

    Regards,
    Yigit

    October 19, 2015 at 11:03 am #520813
    dvwdj

    Thankyou Yigit, the code made the background transparent, but the images are nog the way i want it. As provided in the image below, the images need to ‘fit’ into the box (red box). There is still a blank space, on the left and right side of the square.

    Screenshot

    October 19, 2015 at 4:23 pm #521030
    dvwdj

    Seems like all I had to do was change the settings of the image to fluid instead of fixed width of 250 x 250px…
    So thanks for the help, this thread can be closed!! :)

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Grid layout homepage’ is closed to new replies.