[wattsh]

Hi laranz,

Whew! Thank you. Works on my phone and ipad full width! Yay!!!! Thank you so much. I’m glad this finally works.

Maybe you could pass this along for me: I love Dante and there are so many amazing things you can do with it, but it seems like maybe they left out this very basic thing. I can’t believe it took a seven day support ticket to get a single responsive full-width image set up. Based on all the more impressive things it offers, I naturally assumed when I bought the theme that a full width image would be a piece of cake!

Anyway, since it wasn’t, I REALLY appreciate your & the support team’s stellar help in getting this set up for me. 🙂

Thanks again,
Heather

[wattsh]

Can you check the CSS is still there? I was saving a new header logo and hopefully that didn’t mess with what you were doing.

[wattsh]

Hi Rui, thanks, I cleared my cache again and checked on my phone then tested it in screenfly too. No change yet as far as I can see.

[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/

[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?

[wattsh]

Thanks for this too laranz! Worked like a charm.

Sorry for my ignorance, I knew it was something small I was missing in my code, I just didn’t know what!

The help is much appreciated. 🙂

[wattsh]

This reply has been marked as private.

[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;
}

[wattsh]

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

[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]

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]

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]

Note, if you’re looking at my site, I’ve temporarily changed the color #ffffff to #d2d2d2 just so I can see what’s going on with the text more easily & work on my site in the meantime.

[wattsh]

Thanks Mohammad–

Sorry, I should have mentioned I was aware of that fix. It sounded like there was another fix because of the way Kyle answered. I wasn’t sure hiding a page heading with CSS display:none was a good idea from an SEO stanpoint but it’s no big deal. That’s fine.

Many thanks!
Heather

[wattsh]

Hi Mohammad, Thanks. Sorry I’m having so much trouble–I think that’s where I’m already looking: I’m on the edit screen for a product page, in a section called “Meta Options” -> “Page Heading Options” Is this where I should be looking?

When I deselect “Show Page Title”, the title disappears (yay!) but the breadcrumbs disappear also.

Is there something else I need to do? What am I missing?

Thanks!