Header Background Image Size

Support
#1

Hi,
I am having trouble with an image on my website that I am hoping to receive some help with.

http://3.221.73.82/services/residential-supports/

The image in the header area, the lighthouse with the blue light - it is cut off due to the text being so small within that section. I was able to make it taller to show the full thing by increasing the padding, but I worry that is not the proper way to do it.

Is there a way to make this full image appear properly, and be responsive as well? Right now I have it as the background image on the Row, but I am wondering if there is a better way to do this.

Thank you!

#2

Hello Kate,

Thanks for writing in! Please edit your page and do the following:

1.) In your column settings, set a minim height of at least 30vh. To learn more about hv unit, check it out here: https://css-tricks.com/fun-viewport-units/

Screen Shot 2020-12-17 at 8.10.14 AM

2.) And then in your background image, make sure that it is positioned to the top and left of the container.

Screen Shot 2020-12-17 at 8.12.17 AM

Hope this helps. Kindly let us know how it goes.

#3

Hi,
That helped and got the image to stay, thank you!

Is there a way to bring the words “Residential Services” back to being on top of the light blue section?

I need it to move down by about 68 pixels from where it is currently. Would I use margin or padding for this?’

Thank you!

#4

Hello Kate,

Without adding padding, you can enable the Flexbox layout option in the column settings and then align it to the center vertically.

Screen Shot 2020-12-18 at 9.57.27 AM

Kindly let us know if this will work for you.

#5

Hi,
Thank you. I went in to make this change, and I am now receiving an error message in Cornerstone:

“The preview could not load due to the iframe response being incomplete. This is most often related to a plugin conflict, or customizations introducing a PHP error.”

I have not made any changes to the website, and I do not know why I can no longer edit any of my pages in Cornerstone. Can you please provide some assistance?

#6

Hello Kate,

Could you please update to the latest versions?
Our latest versions are:

  • X theme 8.0.7
  • Cornerstone 5.0.7

This latest release contains fixes for several issues so be sure to check out the changelog:

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

image
image1040×250 17.4 KB

Please let us know how it goes.

#7

Hi,
Luckily updating the X Theme and Cornerstone fixed the issue. Thank you!

I used the flexbox settings but I still need the text to be slightly higher up: http://3.221.73.82/services/residential-supports/

I need it to be moved up about 45 pixels. Should I do this with padding?

#8

Apologies for a second comment, but I am having the same issue with an image on the home page: http://3.221.73.82/

I tried using the VH option but that isn’t doing anything. The image is supposed to be 500px wide, but it keeps resizing it to 250 and I don’t know how to make it appear as the full size. I am using the Image element.

#9

Hey Kate,

Yes, you can add a bottom padding to the column to push the text up.

Try disabling the Retina option of the Image element. That option will scale the image down by half the size of the image.

image

Hope that helps.

#10

Yes that helps, thank you so much for all your assistance!!!

#11

Hi Kate,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.

#12

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