Pagebuilder Image won't display full width

[wattsh]

Hi, for some reason my page-builder image (top image on my page) won’t display full-width. My image is 1500px wide, but it’s being sized down to the 1140px max content width. I’m guessing I’ve missed something somewhere. Here are my settings:

In “Edit Image” “Image size” is set to full, “Full-width” is set to yes.

The image element in the pagebuilder shows as 1/1

In Theme Options -> General Options -> Page Layout is set to “Full Width”

[laranz – SUPPORT]

Hi,

For me it display full width only, See the attached image.. In which OS or browser you are viewing? Can you give those info to check what maybe the issue there??

Let us know,

Thanks,
laranz.

Attachments:

You must be logged in to view attached files.

[wattsh]

Hi,

I’m still struggling with this. If anyone knows how to get a full-screen-width image please help.

I tried the following CSS class to apply which got the image to almost 100% screen width, but then the image acted as a fixed background that my content scrolled over.

It seems weird I can’t figure this out when all kinds of other content can be full screen width. What am I missing? Please help!

.a-full-screen {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
overflow: auto;
margin: auto;
position: fixed;
right: 0;
top: 0;
}

[wattsh]

Hi laranz!

Thanks for taking a look. It’s not displaying right to the sides (about 10px white space either side) in an up to date chrome browser. Same in firefox. But the only reason it’s displaying this big at all is the CSS I just added. Before that it was just 1140 px. I’ll remove the CSS and you can look again.

I want it to be a full-screen-width image that scrolls with the content, but when I apply the CSS I added the rest of the content scrolls over it in chrome and under it in firefox.

Maybe I need to use a paralax image, but I couldn’t get it to size properly to look similar to what you just saw.

Anyway, I’ve removed the CSS and you can see what my image looks like otherwise.

Thank you!

[wattsh]

Hey, I think I figured it out–I’m new to Dante, but I just (FINALLY) found the “swift slider) in the page slider options. Maybe I can just load that with a single image!?

[wattsh]

Sorry, false alarm, it doesn’t allow an image, just post, portfolio or “hybrid” (not sure what that means.)

[laranz – SUPPORT]

Hi,

Glad you found it, yes indeed the CSS you add will display the image in a fixed position.

Try this, first click Layout and add a row, then change the row settings to full width, and inside that row add a single image. It will do the trick.

Let us know if you have any other doubts.

Thanks,
laranz.

[wattsh]

Hi laranz,

Thank you so much for your help. Glad I’m on the right track, but unfortunately I’m still having trouble I added a row and put the image inside, however, a small amount of whitespace is still visible on either side of the image.

I tried playing with the margins & padding and managed to decrease it and center the image, but I can’t get rid of the whitespace.

I also tried changing the image position to absolute, since I want the image to scroll with the page, not remain fixed, however when I do that with the current css added it just appears as a thin line about 1px high as you can see at the link now. I’m sure this just needs a minor fix in the CSS but I’m not good enough at coding to identify what. Please let me know if you can see it. Thanks,

Heather

.a-full-screen {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
position: absolute;
overflow: auto;
margin: auto;
margin-right:-10px;
padding-left: 0px;
padding-right: 0px;
right: 0;
top: 0;
}

[laranz – SUPPORT]

Hi,

Pass me the WP Login details, I will create a full width image for you. Remove any CSS you add.

Thanks,
laranz.

[wattsh]

This reply has been marked as private.

[laranz – SUPPORT]

This reply has been marked as private.

[wattsh]

Thank you so much laranz! I was able to duplicate the effect on the homepage image no problem. 🙂 Looks great. However, it still doesn’t seem to display full width on my iphone 4s screen. There is a thin margin on either side. Any ideas?

[Rui Guerreiro – SUPPORT]

Hi,

In Android seems to be fine.
https://www.dropbox.com/s/7c223dlmmby69cm/2014-11-12%2018.54.45.png?dl=0

Can you try to clear the iPhone browser cache?

-Rui

[wattsh]

Hi Rui,

Thanks for trying, but actually its just the top image that’s not working. The images in your screenshot are part of a portfolio display that automatically goes full width. That’s exactly what I want the image at the top of the page to do but it won’t. (It’s a green image with a heart in the middle that I’m talking about)

I did try clearing my cache anyway just in case, but no, and when I go to screenfly and try it on multiple screens, the top image is only full screen on desktops, not tablet or mobile. http://quirktools.com/screenfly/

[Rui Guerreiro – SUPPORT]

Can you check again added a little css code?

-Rui