-
Posts
-
Hey guys,
I thought i had a problem fixed in the thread i started with this post: #663056
but turns out it doesn’t work for mobile.
I want to have a hero image directly under the main nav that foes 100% width and the full height of the image is always visible. I’ve gotten close by playing around with the settings but either the full height won’t show or the image will shrink and the white space above and below the image will become huge.
Do you guys know any fixes for this?
I got the image working perfectly by trying to create a new template with the image built in but that ended up breaking all the code blocks in the page. Can we try fixing it that way
Hey austinbullock,
Sorry for the late reply!
Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
YigitNo problem! I’ve provided a private link with how i want it to look as well as 2 screenshots of how it appears incorrectly on very wide and very narrow window sizes
So basically what is happening is that the image looks right at only certain window widths. When it’s really wide, the image won’t stretch full width and when the window is really thin, the image shrinks and adds large whitespace on the top and bottom.
I want the hero images height/width to resize so that there’s no gap between it and it’s surrounding elements and window edges
Hi,
Thank you for sharing the screenshots :) To achieve the layout you are looking for the background image height and width will change according to the screen width and this means you need to have an image that has enough border area and the main content in the center so even if the border area get’s cut off the main content of the background images will show correctly.
This is fairly easy to set it up please select the background of the color section to be as a cover image. if you still have any trouble with this please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Vinayok yea but the issue is that i have to set a height for the color section as either a percentage or a specific pixel height. If I don’t select one of those, the height is determined by the content of the color section and there is no content other than the image so it gets cut off on the top and bottom
Hi,
Yes that is expected behavior please edit the image and add more space on the edges so even if the image get’s cut off in the edge main focus will be on the center of the image.
Best regards,
VinayOk it’s just that I had an almost perfect fix by creating a new template with the image set in the .php file. The only issue was that all the elements on the page using a codeblock would be broken.
By adding the image in the template, It sized perfectly all the time and I didn’t have to worry about images cutting off.
I’d really rather not just create a bigger image with more space and hope it never gets cut off.
Hi,
Another solution is to add an actual Image element then hide the section on mobile. Use css media queries to toggle the display property of the elements. http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Best regards,
Ismael
- You must be logged in to reply to this topic.