-
Posts
-
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?
Hey xfacta,
Please try using Grid Row element under Layout Elements of Advanced Layout Builder.
Best regards,
YigitHi 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
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,
AndyActually 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
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,
AndyHi 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
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?
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,
AndyHi 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
Hi,
can you provide us admin access please? post login details here as private reply.
Best regards,
AndyHi 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?
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,
AndyHi,
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,
AndyHi 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
NatashaHi,
you removed my code. I inserted it again and it’s working as expected:
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,
AndyHi 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.
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
- The topic ‘Grid layout for images’ is closed to new replies.