Adjust background image to fit mobile version and cannot find general CSS anymore

Support
#1

Dear team:

I would love to adjust the background image of this page https://happycoollove.de/coaching/ so it will be full view on mobile (currently not the case) the way it is when viewed on a laptop or desktop. Can you let me know how to do that?

Additionally: I cannot find the general CSS window anymore. The only one I find is the additional CSS, however: There used to be one located at design >customizer but it seems to have changed locations.

Another question: Is there a way that I can add a background image to this site: https://happycoollove.de/podcast/ and adjust the size of the image so that it is not full width?

Thanks so much for your help.
Best,
Peri

#2

Hey Peri,

If you want to display your image in mobile the same as in your desktop, it will look like this.

That does not look good so what I’d recommend is that you hide that section in mobile using the Hide During Breakpoints feature available in all V2 elements.

If you’re using the Classic Section, you will need to use the Hide Based on Screen Width option.

After you’ve hidden it, you need to create another section and hide this section in desktop and laptop views. See https://youtu.be/jWsvS8VJ7gA

Regarding the CSS window, it looks like you’ve used Appearance > Customize > Additional CSS for your custom CSS. X does not have any connection with it so the issue in your site could probably come from a third party plugin or some custom code.

And for the additional question, there’s no option to add an image background to archive and post pages. But, you can post a site-wide background image in X > Theme Options > Layout and Design. You can’t edit the image though. The purpose of the background is for design only. It’s not recommended that you use an image with important information such as a persons face.

Thanks.

#3

Dear @christain_y:

Thanks for the reply. I actually do not want to hide the background image while in mobile view. I want it to be seen, maybe not in fullwidth - which, I have to admit really does not look all too appealing. I have background images visible (and it does not look all too bad) in mobile view on the other pages of my site. I am not quite sure how I managed because it was a while ago. I just tried using a new section and adding a background image and a gap. That works fine until I try and add text on top of the layer. When adding text, the image size increases. How can I avoid that (i.e. the image size increasing because I am adding text?).

And: I am pretty positive there was another genreal CSS option except for additional CSS.

And: I do not understand the last paragraph of your reply. Could you try and clarify a bit more? I know that I did manage to add a background mage in the blog archive page. I am not quite sure what you mean by “important information such as a person’s face”.

Thanks so much!

#4

Hey Peri,

Sorry if you’re confused. I didn’t say to hide the image background in mobile. That is not possible. What I said is, you hide the whole section in mobile using the Hide During Breakpoints feature. Then, create a new section designed specifically to be displayed on mobile using the same option. I recorded a video to demonstrate that to you. Please see my previous reply.

The background image will increase in size because the section’s height becomes higher due to the addition of an element.

Regarding the “general CSS”, I believe you’re referring to the old Appearance > Customize > Global CSS? X has moved away from the Customizer a several versions ago. It’s now in X > Theme Options > CSS

Regarding the last paragraph, I assumed you’re going add a background to your podcast page. If that is the case, some parts of your background will be covered with your podcast list. Now that you mentioned your blog page, I checked it and saw that you have a custom CSS applied to the blog’s landmark header. That landmark header is not available in your Podcast page so you can’t apply the same customization as your blog. I’m not sure why the landmark header is not available in your podcast when it’s an archive page. It looks like you have done some theme customizations?

Thanks.

#5

Hi @christian_y:

Thanks so much for clarifying. Now it makes a lot more sense to me! Now I applied your suggestion and - although I did not include a h1 for the mobile view on my coaching page - I am good with it now. Thanks again!

Yes! That’s exactly what I was looking for: global CSS. Thank you!

And: I will look into the podcast archive page again more in detail. I am not quite sure why it does not contain a landmark header. I just remember installing a podcast plugin.

Thanks again!

#6

You’re welcome, Peri.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.