Docs

[lidstone]

Hi there,
I am using X on a site called ccsha.ca and I started with one of your demo content packages.
On the home page I have three images with text beside them and there are some background lines that kind of delineate the photos and text. I have two problems:
1. On mobile it looks like I should turn off the background lines because they are showing up right through the photos and text. However, I can’t figure out where those background lines are. I see them in the Inspector (see attachment), but I can’t find them with Visual Composer (unfortunately this site was built before Cornerstone). I know there are two sections in VC for the same row (one for mobile and one for non-mobile, as controlled by visibility settings, but I can’t find the image to delete it for mobile.
2. I’m having issues getting the padding set right. In some cases I put in padding and it doesn’t seem to do anything. So, my spacing is off.
Would really appreciate your insight into this. Let me know if you want access to WordPress dashboard.
Thanks.
Glenn

The first image is an inspector snapshot of where that background image is.
The second shot is from the site homepage on a DESKTOP.
On the desktop, the gap settings are too big. On mobile, the issue is the lines show up on top of the images and text.

[Rupok]

Hi there,

Thanks for writing in! Is that the correct site URL? – http://www.ccsha.ca/

It doesn’t seem to use WordPress and X. Would you confirm us with the correct URL where you are working on?

Cheers!

[lidstone]

hi there,
My apologies! A typo in the most important information of the URL.
It is ccsh.ca NOT ccsha.ca.
It uses X but because it’s an older site, it was built with VC (something I won’t do going forward).
I managed to get the gaps to look somewhat better on the desktop but on mobile the lines from the background image are overlapping the images. And in particular, I have searched for where you load that background image i.e. the lines, but I can’t find it. If you could tell me how to get to that, that would help a lot!

Thanks you!
Glenn

[Friech]

Hi Glenn,

Lets remove those line background image when the page is viewed on mobile. You can add this under Custom > CSS in the Customizer.

@media (max-width:  767px) {
	.home #x-content-band-5,
	.home #x-content-band-9,
	.home #x-content-band-13 {
		background-image: none !important;
	}
}

Hope it helps, Cheers!

[lidstone]

Thank you. Looks better on mobile now.
I still have to fine tune the spacing but that was the main problem.
Appreciate the help!

[Jade]

You’re most welcome.

[Author]

Posts