Docs

[alfaman68]

Hi,

In the attached screenshot, the text superimposed on the left hand side of the image is too far to the right. I suspect it is the Left Margin setting on the row, but this is displayed as “Auto” and is greyed out. Is there a way I can force the text further to the left please? I have tried changing the Site Max Width and Site Width in Layout and Design in Customizer, but this does not have the desired affect, particularly when the page is full screen on a large screen.

I’m developing offline using MAMP, so I can’t give you a hyperlink I’m afraid.

Any help gratefully received.

Regards,

Nigel

[alfaman68]

File upload failed – screen shot now attached.

[Nico]

Hi There,

Thanks for writing in.

I could see that you are in local mode. As of now, we could not confirm if the suggested CSS would help or it could make things si confusing. If you could upload it online, so we could check your setup and understand your setup fully we’ll do our best to help you.

Thank you so much for understanding.

[alfaman68]

Hi Nico,

OK. Once it’s online I’ll send a hyperlink.

In the meantime, just in case it is significant and suggests an obvious fix, I neglected to mention that the text in question is Responsive Text, not just the normal Text element. Using a Text element behaves as I would expect i.e. it starts further left. I need the text to be responsive though.

Regards,

Nigel

[Rue Nel]

Hello Nigel,

Please send us your link once it is ready. Meanwhile, please look into the row settings and try to disable the column container. This should make your text starts from the left most side of the page. To know more how you can make use of the responsive text, please check it here: http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps.

[alfaman68]

Hi,

OK, the hyperlink is https://nigelroberts.photography. Disabling the column container has no affect I’m afraid. I just can’t find a way of getting the responsive text further to the left when viewed maximised on a large screen. At other screen sizes it seems ok.

Also, a few supplementary questions if I may…

Is there a way of making the menu background transparent, so that the images appear behind the menu?

Is there a way of making the section background images responsive?

Finally, is there a better way for me to implement this design with text over the images, in order to make it responsive? At the moment the only solution I can come up with is to have different sections for different screen sizes, with different sized images for each.

Thanks,

Nigel

[Rue Nel]

Hey Nigel,

Thanks for updating in!

#1] Disabling the column container has no affect I’m afraid. I just can’t find a way of getting the responsive text further to the left when viewed maximised on a large screen.
– Even if you disable the column container, since you have added a custom class row-expanded and you have added a custom css using this class in the customizer as this:

.x-container.row-expanded {
    max-width: 1000px;
}

Please try to remove the the custom class and see what happens. Or you can update your custom code and make use of this code:

.x-container.row-expanded {
    max-width: 90%;
}

#2] The navbar is positioned before the section where there is a background image. Even if you set the background color of the navbar to transparent, it will still have a white background because it is not positioned as the top layer of the section.

#3] To fully understand how background images within section works, please check this out: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Hope this helps.

[Author]

Posts