-
Posts
-
Hi there,
I have chosen a Stretched Layout with 90% Max Container Width. I am using a 3 column Grid to organize content and each cell has a background image. I want the ‘images’/cells to appear centered. I have used left padding of 10% on the left cell and right padding of 10% on the right cell to get the look that I want. I have left borders on so you can see what I’m mean. But that layout falls apart on the mobile phone view when cells are stacked.
Is there a way (code I guess) to give a Grid the left and right margin without using the padding?
Im assuming it is easiest to make the change to all Grids on the site. So far I think that would be fine. Would it be possible to do this on a page by page basis (in case I want a grid to stretch full screen as I continue creating the site) ?
Thank you
Hi susizimm!
Have you tried using column elements inside of Grid section? It sounds like an easier solution to me :)
Regards,
YigitHi Yigit,
Yes I did play around with the column element but ended up liking the look of the Heading over the shaded area on the background image better than a Heading above the images. There is no way to use a background image in a say Text Block right? I want the Headings to count towards SEO/keywords etc so didn’t want to create an image with text and upload it as a jpeg.
If there is a short piece of code that would bump the Grid element (for all pages is ok) that 10% making it act like a column element could you give me that. That would also line up the grey background color on the About Us/The Yacht Discovery page.
Else I will make do with what is available.
Thank you – Susi
Hey!
I can’t open your website. I get to a red page where I am supposed to fill in a captcha, but when I do so I geht to a blank page …
However, can you please provide us a mockup/screenshot showing exactly what you want to achieve? so we can provide you some precise CSS code? you can use a public dropbox folder or imgur.com to host your screenshots.
Regards,
AndyHi!
I’m sorry but I’m not really sure what you mean by “bump grid element 10%”. Can you take a screenshot and highlight what your trying to do so we can get a better idea?
Cheers!
ElliottHey!
I think with what your trying to do a color section with 1/3 + 1/3 + 1/3 columns inside would be better.
Best regards,
ElliottHi Elliott
I don’t think your suggestion works – unless i am missing something? How do I get Background Images into the 3x 1/3 columns??????????????? Background images is what I am trying to do here. The Grid seems like the only element where I can do this?
Im not getting the point of a Color Section here – it seems like I can only get one background image into that.
Can I just get a Yes or No answer to the question “Is it possible to put a margin on the Grid Element, i.e. Can you give me code that will indent the Grid Element ( by the same amount from the left and right side of the page) by either a px (say 100px) amount or a % amount (say 10%)
Thank you – Susi
Hey!
Do you really need the images and content to snap to the border? Right now, that doesn’t look right. Can you please provide a screenshot of the final layout of this section?
Regards,
IsmaelHi could this please go to Ismael only please – I am sick of having to go over everything with someone new all the time as i feel i am saying the same thing over and over.
I don’t need the images to snap to the border. The border is only there (on the Home Page grid, and I took it off the first row) to illustrate how I aligned the background images (top right,top center and top left) to get the look i want – which was my first try at it.
If you go to the website http://www.aclassicyacht.com I have uploaded examples/screenshots as described below.
I would like the grid rows (starting with image ‘Alaska Inside Passage’) to look like it does on the Home Page (borders will be turned off). I can’t do it the way I first tried as the aligned background images (right, centered and left aligned) do not work on the mobile phone – you can see this on “Mobile View page).
If you go to the 2nd page on the website main menu “Grid Example” you will see what I can achieve (and I can live with this if I have to. Here all the background images are “top center” aligned.
If you go to the next page “Screenshot” you will see what I would like to change from Grid Example pg to get it to look more like the Home Page.
** I do really appreciate your help. Sorry that It seems to have turned into more of an issue than it should be.
Thank you – Susi
Hey!
thanks for the screenshots and the examples. Now I think we got a better idea of what you want to achieve. Please try this code for your grid layout on home page (for desktop view):
div#av-layout-grid-2 { width: 90%; margin-left: 70px; }and adjust if needed.
For centering on mobile devices add this code as well:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .av-flex-cells .no_margin { background-position: top center !important; }}Hope you are happy now :).
Let us know when you still need help.Cheers!
AndyHi,
The mobile view code doesn’t seem to work. It doesn’t take away the 70px margin that centers the grid on the desktop.
The code for the desk top view works great.(( I don’t have an iPad so am hoping it will work for that size also.))
** Instead of the 70px margin (which centers the grid on the desk top page) is it possible to tell the 90% width Grid to be “aligned center” – i.e. to center it on the page. Seems like that would solve the problem for all size screens. The 90% width, centered look is what I am trying to achieve.
Thank you – Susi
Adding to the reply above which I’m waiting for a response on.
To clarify it lines up perfectly with the 70px margin on the desktop view. Just thinking now that I have the code to make the Grid 90% (same as my Max Container Width setting) it would just need to be center aligned on the page to make it work across all screen sizes.
Thanks
Hi!
just add a margin-left into my mobile code:
@media only screen and (max-width: 767px) { div#av-layout-grid-2 { margin-left: 17px; }}adjust “17” as needed until it gets perfectly centered for you.
Cheers!
Andy
- The topic ‘Left and right margin for Grid so Background images display correctly’ is closed to new replies.