[tntcreationParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

To background position for the first section, you may add the following custom CSS via Appearance > Customise > Custom > CSS:

div#x-section-1 {
    background-position-y: 83px !important; /*Adjust this to your preferred position*/
}

To control the position for mobile:

@media (max-width:  767px) {
div#x-section-1 {
    background-position-y: 83px !important; /*Adjust this to your preferred position*/
    background-image: url(http://background-image-for-mobile.jpg);
    background-color: transparent;
}
}

Please note that on mobile, you have to use smaller image. A vertical type image. Because as you can see your content will stack up and needs a longer background image than a wider one.

Hope this helps.

[tntcreationParticipant]

Hi, it seems to have worked for the desktop version, but adding a different photo for the mobile version has just stacked them two on top of each other!

[tntcreationParticipant]

The fit was good on mobile, so I tried putting it on 0 pixels with your code but that hasn’t worked!

[LelyModerator]

Hello There,

I did visit your site and resize my browser to check your image for mobile. Unfortunately, I can’t see it.
For mobile, please update to this to stop from stacking up:

@media (max-width:  767px) {
div#x-section-1 {
    background-position-y: 83px !important; /*Adjust this to your preferred position*/
    background-image: url(http://background-image-for-mobile.jpg);
    background-color: transparent;
    background-repeat: none  !important; 
}
}

We really need your CSS for mobile to see on the page so we can check better.

Hope this helps.

[tntcreationParticipant]

That’s something I can get to you? I’m not sure what you mean.

[John EzraMember]

Hi there,

Thanks for updating the thread and sorry if we weren’t clear. What we mean is we need to know which CSS you already have and where you have added it. There are a number of places they could be:

– Customizer Custom CSS
– Child Theme style.css file
– Cornerstone Custom CSS (per page)
– Inline Styling per element
– A combination of the above via classes and IDs on individual elements.

We look through a lot of posts throughout our shifts, so despite knowing X, the user still knows where their changes are better than we do. Though sometimes some users forget and that’s where it gets a bit complicated as we don’t have time to scan through users code and fix sites. That is beyond our scope of support, though if we can fix things quickly we do try where possible.

When a thread gets long it’s harder to track what’s going on. Another staff member usually picks up the thread so it’s best to give as much info as possible, screenshots and screen recordings help a lot especially when trying to show something that we might not be seeing on our end.

What I described is in general, for your case, however, let’s try to keep this from going back and forth. Would you mind making sure of the following?

1. Please make sure you have no performance or caching enabled via plugins or on your hosting side.
2. Update X theme and Cornerstone to the latest versions (so we narrow down issues)
3. Show us via screen shots what you are seeing on your end.
4. Then tell us and show us what you would like to achieve.
5. Let us know where you are adding your styling (customizer, cornerstone custom CSS, inline CSS, child theme stye.css file?)

Once we understand what’s going on and why things don’t seem to work the way you would like, we can start to see what needs to be done and we can tailor our advice.

Thank you for your patience, we’ll do what we can.

[tntcreationParticipant]

This reply has been marked as private.

[tntcreationParticipant]

This reply has been marked as private.

[tntcreationParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

We can’t view your screenshot, can you please send it again.

You can upload it on this site then share us the link

Thanks

[tntcreationParticipant]

http://prntscr.com/842spg — That’s the mobile version!

[tntcreationParticipant]

http://prntscr.com/842szz — and there is it on desktop! I would like the white bar to not be there, so the photo fills the box, that’s what I want help with.. and then I’m going to put the Text Type above my arm/hand

[Paul RModerator]

Hi,

I am seeing it differently in mobile.

http://screencast.com/t/vQ2cZQ2rW7SI

Please add this code again in your custom > css

@media (max-width:  767px) {
div#x-section-1 {
    background-position-y: 83px !important; /*Adjust this to your preferred position*/
    background-image: url(http://background-image-for-mobile.jpg);
    background-color: transparent;
    background-repeat: none  !important; 
}
}

Then change http://background-image-for-mobile.jpg with your image for mobile and change 83px to adjust the position of your image.

If it doesn’t work well please don’t remove the code until we can check again.

Thanks

[tntcreationParticipant]

Hi, it doesn’t appear to have changed, but I will check throughout the day! Thanks so much for your time and patience.

[Author]

Posts