Docs

[tylervarian]

Hi. Thank you for your response, please read to the end….

A couple of things. I added the CSS you suggested above AND reduced the padding to 50px (top and bottom). The only reason I had the padding up so high is because I couldn’t see the full image in Cornerstone Preview. What should the optimal size of this image be? If you look now, you will see that the bottom of the image is cut off on desktop view and still messed up on mobile view.

My OVERALL QUESTION is (and this has been an issue for me from the beginning) How do I figure out what the image dimensions (on any given image (background image AND general image) should be? My images are either too large or too small and then I have to play with padding. This is a major problem for me. As you can see, this is an issue I am having with the blue image at the top of the page as well. Unless I put some extra padding in there, I can’t see the checkerboard. (see the image as it appears in the background upload area — within Cornerstone)

Please use my credentials above and see the Global CSS changes I implemented. (Obviously, your CSS because this is beyond my brain level.) 🙂

Thanks SO MUCH for your continued help!!

[Joao]

Hi There,

You can check on your Appereance Customizer Layout and Design what is set as your Web Site width.

Regarding your website I belive for the full screen you should go with 1200px or 1600px width.

Try remaking that blue image into 1600px 560px and reuploading, And Before you re-upload use this website to improve performance.

http://www.tinypng.com

Google Chrome has really cool Addon called Page Ruler, you can use to measure your website it helps a lot.

On the green section where you have the green background with 2 pics you could either use the pics as images instead of a background on top of a green background put one of top of the other an make them float:right and left by adding float:right in one image style box in cornerstone and float:left on the other.Or if you want to keep using as background image you can divide that section on two columns so the text on the left dont overlap the pictures.

Hope that helps,

Please reach us if you have any questions

Joao

[tylervarian]

Thanks so much Joao. I will take your advice and try all of the above! I’ll get back to you in a couple of days as I need to wait for my graphic designer to resupply the artwork to me.

Thanks again!

[Nico]

Happy to hear that.

Feel free to ask us again

Thanks.

[tylervarian]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for updating this thread! To make sure that your checked image will be responsive enough, why don’t you make it just a background image of a section. And in the column, you can simply add a gap element. I created a test page for you to check out here: http://69.195.124.107/~tudiofi8/?page_id=535

Just one thing I would recommend, please make sure that on the each end of the checkered image, please make it uneven so that when the background image repeats, it will be unnoticeable that the image was used repeatedly as if it is a continuos image.

Hope this helps.

[tylervarian]

Hmmm. So I understand what you are saying. I added a new section – added the checkerboard as a background image, then using CS elements I added GAP. The larger I made the gap the worse the image looked. This is a screenshot of my new checkerboard with GAP 50px underneath the existing one.

I have deleted it so it is no longer on the site but it obviously was not giving me my desired outcome. Not sure what I’m missing here. Thanks for your help!

[Rad]

Hi there,

You should toggle the Pattern option along with your background. Pattern is the type of background you’re trying implement.

Thanks!

[Author]

Posts