Showing full width images in bottom 1, 2, 3, 4, 5 positions

Hi.

I am using MusicState with J3.0 and I am building a full width web site.

I am using Image Show GK4 in the header position and have been able to display this across the full width of my screen using max-width: 100% code in override.css against #gkBg

I want to display full width content in the bottom 1, bottom 2, bottom 3, bottom 4 and bottom 5 module positions too.

So far I have created custom HTML modules with wide images in, but they aren't displaying full width like the Image Show GK4 in the header position.

Please can you advise what I need to do to make these display full width?

This is a fairly urgent enquiry so I would be very grateful for a rapid response on this one (which I am sure I will get anyway!).

Thanks

Could you please post an url to your site?

Sorry Cyberek - still at demo stage!

What I am working with is not developed beyond Quickstart package yet

(I am going to come back to you as soon as it goes online)

Would be so grateful if you could help me crack this enquiry though in meantime!

Please write back as soon as the site will be accessible online.

Hi Cyberek, I've sent you a PM with site details. Thnx

The PM is sitting in my outbox. Please can you you let me know an email I can use to send you site details?

Please edit: /templates/gk_musicstate/css/override.css and add at its end:

Code: Select all

#gkBottom1 .box.normal-width, #gkBottom2 .box.normal-width, #gkBottom3 .box.normal-width, #gkBottom4 .box.normal-width {
max-width: 100% !important;
}


This will force the modules to be 100% width, and so the images inside of them can be 100% width. The only thing that you should concert after that change is the images or other elements to be wide enough on 1920px wide screens (or even bigger).

Remember to enable "CSS override" in template settings - advanced section.

Ps - PM's are in outbox till I will read them .

Cyberek - you are a total legend.

Thank you so much - now I am getting closer to achieving what I need to!

Can I add something to fix the image so even if you zoom out you can never see white margin?
I know on background this is something like position: fixed.

Thanks!

I'm not quite sure what do you mean. Zooming out in browser "View" settings?

Sorry Cyberek - I should have been clearer.
Yes, this is what I mean.
On Mac OS X, if you press CMD and - or +, your window zooms in and out (on Safari, Chrome and Firefox).
If you zoom out you start to see white margin at a certain point.

To achieve a site that would look ok while zooming, you would need a lot of work and usually we just don't provide that much code, as users who zoom out or in much know that site will not look that good. Zooming out is strange idea as the fonts become unreadable so why would user do that?