My site http://www.beautifulumedspa.com is using the demo content form Integrity-4, when viewing on tablet or mobile device, the image cuts off the text instead of resizing to fit the window. When I open code inspector in safari and THEN resize the page it DOES resize the way I want it too (where nothing is cut off from the image. How can I make it behave like that all the time?
Hello @kvpadmin,
Thanks for asking. 
Please add following CSS under Pro > Theme Options > CSS:
@media only screen and (max-width: 600px) {
.backstretch img {
display: block;
object-fit: cover;
}
}
If you would like to learn CSS, please take a look at following resource:
Let us know how it goes.
Thanks.
That didn’t work, it still cuts off the text when I view in a narrow window on my computer or when I view on my phone. I did clear my cache and refresh and it’s still doing it.
I believe object-fit is the opposite of what I want. I want the full width to show, not be cropped.
I tried object-fit: contain as well and it still cuts off the text when I resize with window narrower. It feels like there is a min-width or min-height in effect here but when I added css to override those, it didn’t help either.
Hi There,
That is not going to work, because you can never fit a landscape background-image to portrait container. It will be either cut or be stretched or squished to fit.
I advise that you create a section that is only visible starting at 979px (medium) and below screens, then add your background image to that section without the embedded text. Then add the text as Headline element.
Hope it helps,
Cheers!
I created a new home page in Pro like you said but theres a white background under the text stuff even though I set it transparent in the section and the row. How can I force it to be transparent over the background image? Also, when I set the margin to 80% the text was completely off screen. Right now I have the top margin set to 30% and it appears to be about 50% down in my screen. http://www.beautifulumedspa.com/new-home/
I figured out the background issue but the spacing still looks off. I have it set to 50% 20% 30% 0% and the top of the text definitely still looks more than 50% from the top of the page.
Also, the social media icons in the header are now blank. I’m guessing thats a separate issue and I just now noticed it but any ideas on fixing that? It’s just using the social text boxes under theme options.
Hi There,
Please also add this custom CSS:
.backstretch img {
top: 0 !important;
}
Please change your social icons HTML to this:
<i class="x-icon-facebook-square" style="color:#68884a; font-size:26px;" aria-hidden="true" data-x-icon-b=""></i>
<i class="x-icon x-icon-instagram" style="color:#68884a; font-size:26px;" aria-hidden="true" data-x-icon-b=""></i>
This issue occurs as of Font Awesome version 5 they split icons into multiple fonts: https://theme.co/apex/forum/t/release-notes-pro-2-2-x-6-2-cornerstone-3-2/382345.
Regards!
But those icons aren’t generated by any HTML I entered. I just put the social URLs into the theme options and it’s generated there. I’m not sure how to fix that. It’s part of the theme no?
Hello @kvpadmin,
Thanks for updating the thread.
Please note that in latest version of Pro Theme we have updated version of Font Awesome. There are couple of possibilities over here as to why social icons are not showing up:
- I see that you are using Pro child theme. Have you made any changes into social icons using child theme? If yes then you need to update the code to
data-x-icon-b. More information can be found on this post:
- There might be a issue of cache. Please try clearing cache and see how it goes.
- There might be the case that update didn’t went properly. You can try to delete current parent Pro theme and then reinstall a fresh version of Pro Theme.
If icons are still not showing up then please share website login details in secure note for us to take a closer look.
Let us know how it goes.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.