Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #682502

    Hi there

    I am wanting to achieve look as per link in private section for the homepage.
    How is the best way to achieve this – I have been trying unsuccessfully to do so.

    I would like it to be full page width, but have different column widths but have no gap in between each column.
    As per the mock up in the grey areas these would be an image and I want to be able to have text over top of each graphic and a button link as well – all overlapping the graphic behind them.

    So for example 2/3 column right beside a 1/3 – but full screen width
    then underneath maybe 1/4 column, 1/4 column then half a column.

    Is this possible and if how can I create it?

    #683789

    Hey xfacta,

    Please try using Grid Row element under Layout Elements of Advanced Layout Builder.

    Best regards,
    Yigit

    #683946

    Hi there

    As you can see from my attempts to make what I need work on that homepage link I tried the grid row option but can’t get the button to overlay on the images – how can I do that?

    Also in regards to image sizing how do I work out the right size for images to fit for grid options like this (for full width screen options and then responsive so it fits anyones different size monitor/screen. And the correct height and depth so it all lines up perfectly?

    Cheers

    #686346

    Hi,

    I can’t find any overlay button on any images. Could you remove it already? if not please provide us screenshots showing the issue.

    Wordpress is cropping images by default when uploading them and if you want to control this behavior you can use a plugin like this: https://wordpress.org/plugins/simple-image-sizes
    I hope this will help :).

    Best regards,
    Andy

    #688355

    HI there

    Yes I think I have figured it out now :-)

    #688366

    Actually I am still having an issue with the grid areas displaying well across different size screens.

    I have changed the image sizing to “entry without sidebar” on the top 2 images (1/2 columns. But I’m viewing on a large screen iMac and their is a gap around each one – then when i check different size screens in developer mode in Safari to show responsiveness the buttons dont centre on the iPads and smaller desktop screens and on the mobile phones there is a big gap between each image.

    When I put the images in at “full size” they dont scale evenly either.

    What is the best size to create my images at so I can get them to display correctly?

    new website link below

    #688565

    Hi,

    please make it easy for us to see what the whole issue is about. Provide us screenshots to make things clear. No idea about which images you’re talking about. I can’t find any issues.

    Best regards,
    Andy

    #688870

    Hi there

    Yes certainly – I have checked on my computer and also iPhone and the display isn’t showing as it should. I have also checked in the developer screen of my browser to show in responsive design mode (so it shows me how it displays across all screen sizes) and its not consistent.

    Links to some screenshots in private area. I have named the files explaining what is wrong in each view.

    Cheers

    #688970

    Ok sooooo I have now tried to size them all the widths to fit the areas. Now the width the height seem to all line up except now there is a white space/gap between the top row and the bottom row?

    Also when I view on iPad and smaller screen sizes the text and buttons dont seem to scale/become responsive – so are showing really large.

    On mobiles the text and caption is aligning at the top of each image – I have it set to be in the middle and centred?

    #689154

    Hi,

    sorry, but it’s totally unclear to me. Can you highlight the issues please? I can’t see anything wrong on your screenshots. Would be best to provide us a mockup I think showing what you want to achieve, instead of showing what I can already see an your website.

    Best regards,
    Andy

    #690021

    Hi there I have taken screenshots of how its displaying on different devices.

    I want all of the images in the grid area to have all images touching – there is a gap (white space) between the top row and the bottom row – how do I fox that?

    Also on smaller the screens the text and buttons aren’t shrinking down proportionally to the screen size – so look too big.

    And on a mobile phone the text it aligning to the top of the image – it should be centred on the image

    #690642

    Hi,

    can you provide us admin access please? post login details here as private reply.

    Best regards,
    Andy

    #691064

    Hi there yes details below :-)

    Also is is possible to have the buttons with the outline – eg the dark transparent and light transparent but change the border colour?

    And can there be a hoover effect over the images? I have them as background images so that I can have text and buttons over top of them but the text can be hard to read so a colour transparency that is enabled on hoover or a image blur effect or something – can that be done in the grid?

    #691661

    Hi,

    what about a link to your website? we can’t login without it …
    Also send us a precise link showing the elements on your screenshots.

    Best regards,
    Andy

    #691689

    Address below. And it’s the home page

    Thank you :-)

    #691789

    Hi,

    I entered a custom Class for your second Grid Row Element called “kriesi-grid”. Then I used this code inside your Quick CSS field:

    .kriesi-grid {
    background-color: transparent;
    top: -24px;
    }
    

    Can your confirm that you’re happy now :)?

    Best regards,
    Andy

    #692007

    Hi there

    Nothing seems to have have changed?
    there is a still a white gap between the top grid and the next grid – that shouldn’t be there – I wanted all the images to be touching.

    Viewing on a mobile the text and buttons still align to the top of the images when they should be centred.

    And there is no hoover effect?

    Im not sure what that code you added was meant to do?

    I am on a tight deadline now to get this website live for my client and only have a few days left to get this sorted please help :-)

    Cheers
    Natasha

    #692661

    Hi,

    you removed my code. I inserted it again and it’s working as expected:

    View post on imgur.com

    Use this as an example for your other elements.

    If you have a time sensitive project we recommend to hire a freelance developer.

    Best regards,
    Andy

    #692675

    Hi there

    Thanks for this. I actually didn’t remove your code so not sure what happened there.

    Thank you the images are all touching now which is great however if you view the page on mobile it’s not displaying correctly it’s all out of alignment to and the text isn’t sitting in the right boxes. Do you have a responsive viewer on your browser so you can see what it looks like in each type of device and screen as you’ll see it’s not looking right.

    #693689

    Hi,

    for mobile you need to add media queries to my code. Something like:

    @media only screen and (max-width: 736px) {
    .kriesi-grid {
    background-color: transparent;
    top: -24px;
    }
    }
    

    Adjust as needed.

    For more information about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    #695338

    Hi there

    I gave up on this one – and have done them differently now.

    Thanks for your help anyway :-)

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Grid layout for images’ is closed to new replies.