- This topic has 47 replies, 4 voices, and was last updated 3 years, 6 months ago by Tom.
May 23, 2018 at 10:37 am #582825Tomasz
Now (for mobile view) the image is:
– on the top of the website, just in the browser view (good);
– horizontally centered and responsive (good);
– vertically not centered and nonresponsive (not good);May 23, 2018 at 10:47 am #582828LeoStaffCustomer Support
Hmm not sure how it could be on the top of the website and vertically centered?
Background images aren’t responsive by nature so there isn’t much we can do about that.
Are you able to provide an example of the effect you are trying to achieve?May 23, 2018 at 11:03 pm #583199Tomasz
My goal is to achieve something similar to this: full page and to be able to overlay this with text, possibly also with semi-transparent box.
I will work on this today and report.May 24, 2018 at 6:25 am #583489Tomasz
I have solved the image issue.
Right now I’m back to the page header next issue. While resizing browser window the text stays adjusts as it should and stays on the bottom of the browsing window – fine! But on my Kindle 7′ the page header text along with its container (dark overlay) gets lower than the browser window…May 24, 2018 at 9:41 am #583741LeoStaffCustomer SupportMay 24, 2018 at 11:12 am #583829Tomasz
You think it might be because of the device? I don’t think so 🙁 After deleting padding (which should provide only additional space – at least I think so) the same happens on other mobile (and perhaps tablet) devices as well. Have a look now.May 24, 2018 at 11:36 am #583844LeoStaffCustomer Support
The example you linked is super easy to create with our page header add-on.
The difficult part is that you want the image to extend to the content part as well which is something the example site isn’t doing.
If you are ok with only using image for the header/hero image part then we can definitely accomplish it a lot easier.
I also don’t think
height: 100%;will work.May 24, 2018 at 1:08 pm #583890Tomasz
I’m quite happy with how the image displays right now. By extending, do you mean making it fixed?
I am more worried about how the page header text is displayed. Once again, I would like it displayed on the bottom of the browser view… I am he image. They do not seem to be connected in the CSS.
In the worst case, I can have the text centered vertically (instead of putting it on the bottom) – which works fine.May 24, 2018 at 3:27 pm #583993LeoStaffCustomer SupportMay 25, 2018 at 3:26 am #584279Tomasz
I see the problem on an updated Chrome browser (Huawei P8, Kindle 7 II gen., some newish Samsung mobile). The text is on the bottom like I want it, but it extends out of the browser window.
In IE (10+ at least) I don’t know how to deal with lack of support for media queries. All across the devices mobile specific (no media queries), css is displayed. The page header is way to low and overflows next element (h3 title).May 26, 2018 at 5:30 am #585013Tomasz
bumpMay 26, 2018 at 9:19 pm #585432TomLead DeveloperLead Developer
Just to confirm, is the issue the text requiring you to scroll down a little to read it all? It’s almost like the address bar is pushing down the full height element.May 28, 2018 at 1:30 am #586023Tomasz
Also, any directions you can put me towards in terms of making my site Internet Explorer friendly. I looked all over the web but can’t find a good solution for addressing media queries in IE10+.May 28, 2018 at 9:20 am #586399TomLead DeveloperLead Developer
Unfortunately I don’t think there’s a way around that, as the address bar contributes to the height of the area: https://stackoverflow.com/a/37113430/2391422
I’m not sure about media queries and IE10 unfortunately. You may need to ask that on stackoverflow.com.May 28, 2018 at 1:29 pm #586554Tomasz
Heh, thanks. I gave it quite a bit of thought and couldn’t figure this (first) issue out. Thinking of this now, if the address bar contributes to the height, how come I was able to create a background image that is of a correct size? I might try one more experiment…
- You must be logged in to reply to this topic.