Fallback Mobile Header Image Dimensions
Permalink Browser Info Environment
Hi,
What are the required dimension for the Fallback Mobile Header Image for the homepage? I noticed that there is some cropping with the current image I am using.
What are the required dimension for the Fallback Mobile Header Image for the homepage? I noticed that there is some cropping with the current image I am using.
| Type: | Ticket |
|---|---|
| Status: | Archived |
You can see the cropping on a mobile phone The live site is:
http://thelasvegastenors.com/2017newsite/index.php...
Also, after developing the site and launching it on this directory /2017newsite/ I attempted to move it over to the main domain root directory and had several errors. Site would not load/respond. It's never been an issue before. So, I moved it back and created a redirect until I can figure that out. Thoughts here?
http://thelasvegastenors.com/2017newsite/index.php...
Also, after developing the site and launching it on this directory /2017newsite/ I attempted to move it over to the main domain root directory and had several errors. Site would not load/respond. It's never been an issue before. So, I moved it back and created a redirect until I can figure that out. Thoughts here?
Hi Tommy
Sorry for the delayed response. I've been checking the code and it seemed that the problem is on the fallback container. Can you add this to your custom CSS panel?
As for your deployment issue, probably the paths to the new files are not connecting? I would probably start tracing that first.
Kind regards,
James
Sorry for the delayed response. I've been checking the code and it seemed that the problem is on the fallback container. Can you add this to your custom CSS panel?
#fallbackios{ margin-top:-35px; }
As for your deployment issue, probably the paths to the new files are not connecting? I would probably start tracing that first.
Kind regards,
James
Thanks so much! I added that code and the cropping still occurs on the sides as before. The image needs to stay full width or I need to know what the crop dimensions are so that I can get the artwork to fit correctly.
And with regards to deployment are you referring to the config file paths?
Yes, the config files. Also, what hosting are you using? Do you have full access to it or just cpanel?
As for the image, Can you make an image that is 1080px wide and 1920px high. Or any dimention with taht ratio.
James
As for the image, Can you make an image that is 1080px wide and 1920px high. Or any dimention with taht ratio.
James
I have my own servers and do have root access. It has not been an issue in the past using other themes. Just develop in one directory and then on launch move over to home directory and all is well.
Regarding the cropping issue.... The image now falls within that spec and still crops. The full image does not show on the page. It would also be nice if we had the option to display the image on the page until the video loads on the desktop view as well.
I removed the custom css that you sent as it was causing a bump of the page when scrolling.
Regarding the cropping issue.... The image now falls within that spec and still crops. The full image does not show on the page. It would also be nice if we had the option to display the image on the page until the video loads on the desktop view as well.
I removed the custom css that you sent as it was causing a bump of the page when scrolling.
Hi
I think I may have misunderstood. The fallback will try to cover the whole area where it is displayed. So there will be cropping involved on different ratios. I can send you a CSS which will remove the cover property and change it so that the image will fit and not crop. How does this sound?
James
I think I may have misunderstood. The fallback will try to cover the whole area where it is displayed. So there will be cropping involved on different ratios. I can send you a CSS which will remove the cover property and change it so that the image will fit and not crop. How does this sound?
James
That sounds like a plan. Please send on you custom css update so that there is no cropping of the image and the full image shows in the header in the mobile view.
Also, Is there a way to show that image on the desktop view until the video loads?
My client also asked if this were possible...
-different videos for different times of the day (schedule) am video and pm video
-video on the mobile version
Also, Is there a way to show that image on the desktop view until the video loads?
My client also asked if this were possible...
-different videos for different times of the day (schedule) am video and pm video
-video on the mobile version
This code will make it fit instead of cover but you might have to adjust your image. I've attached a screenshot of how it would look like after adding the code.
You need to do a bit of html changes to get the fallback to show while the video is loading. First you need to switch the fullwidth-video div and the fallbackios div. and apply a display block to the fallbackios div on desktop view. see attached
As for scheduling a video to run, the theme does not have that feature now and may take time to create.
The video on mobile is disabled by IOS and new versions of Android by default. They did this intentionally to not use excess amount of data when viewing sites on mobile. As of now, I have not found a work around. Sorry.
Please let me know if you need further assistance with the fallback.
All the best,
James
#fallbackios{ background-size: contain; }
You need to do a bit of html changes to get the fallback to show while the video is loading. First you need to switch the fullwidth-video div and the fallbackios div. and apply a display block to the fallbackios div on desktop view. see attached
As for scheduling a video to run, the theme does not have that feature now and may take time to create.
The video on mobile is disabled by IOS and new versions of Android by default. They did this intentionally to not use excess amount of data when viewing sites on mobile. As of now, I have not found a work around. Sorry.
Please let me know if you need further assistance with the fallback.
All the best,
James
I applied the custom css and the image still crops for me on IOS. Also had someone try as well on their phone. Made sure cache was clear etc. Not working. Also, looking at your screenshot the image is correct but would need to be pushed up to top and eliminate all the space there. Let me know your thoughts.
Thanks for the info on the video for mobile and the failover on desktop while loading. Will try that later once I get this fixed.
Thanks for the info on the video for mobile and the failover on desktop while loading. Will try that later once I get this fixed.
Hi,
I checked and I can see the code there but it is overwritten. Sorry about that. Can you append an !important to it. It should look like this:
I checked and I can see the code there but it is overwritten. Sorry about that. Can you append an !important to it. It should look like this:
#fallbackios{ background-size:contain !important; }
Hi,
Thanks so much! No longer cropping. however how can we get rid of all the wasted space in the header? Fill the full image (no crop).
Thanks so much! No longer cropping. however how can we get rid of all the wasted space in the header? Fill the full image (no crop).
Good to hear.
The only option you will have to remove the space without cropping is by stretching the image. Are you sure you want it that way. It might look really awkward.
James
The only option you will have to remove the space without cropping is by stretching the image. Are you sure you want it that way. It might look really awkward.
James
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
I've set up the fallback image to cover every part of the background when invoked. Can I check your site to see where the cropping is?
Kind regards,
James