Hello, I'm trying to change the position of module sidebar-2 using @media screen with CSS but to no avail: www.northshorehostelmaui.com
the position of the reservation widget stays floated right (which is what I intended in the custom HTML article) and I can't seem to have it float to the left on my phone using @media screen...unless I'm not changing the CSS in the correct file? Is this because it's in the sidebar position...I expect so...?
I hope this is enough info if someone might have some experience with this...I appreciate some tips....thanks

Hi

Looking at the widget

element.style {
float: right;
width: 220px;
padding: 0px auto 0px 0px;
}

It has inline styling so you want to override these values at a particular width - is that correct?

Cheers
Paul

Cheers
Paul

Are you able to load the widget in the article without a sidebar using either loadposition or an extension?

Cheers

yes that's correct I want to override the inline styling at different widths....no success....not sure how to use {loadposition} command to achieve that as you've suggested...I've changed custom.css with the following:
@media screen and (max-width: 620px;){
#sidebar-2 #eik {
float: left;
}
}

Hi

I would still look to use loadposition rather than make really big changes to the template css

www.joomlabamboo.com/blog/tutorials/using-the-loadposition-plugin-to-load-joomla-content

www.ostraining.com/blog/joomla/loadposition-loadmodule/

Cheers
Paul

thanks from a noob...I hope to sort it out using these valuable resources...you guys are great~

Aloha...
Michael

You're welcome

I'd add a div to the html and then add the loadposition inside that div and then float the div using css

Then see how that looks / works

Cheers
Paul

no luck...I've tried floating,...doesn't want to respond to the @media screen styling...and not much success with either loadposition or loadmodule....I only want the reservation widget to float to the left on a phone...no success with these methods yet...

So Just to summarise with loadposition

You've created a unique position name and that is the position name box (best a position name with no spaces)

The module is assigned to all pages

Then in the article you've added {loadposition yourpositionname)

Cheers
Paul

Sorry if I'm being dense...perhaps I'm still missing something...using this technique would require me to use {loadposition} to place this widget in each article of my site? I've created a custom HTML module in sidebar2 which is working well except for the floating issue mentioned above (and not playing well with zentools gallery)...I want this widget on every page ergo I must modify all the articles using this technique? My understanding is that was what the various positions were meant to accomplish...thanks for your patience...I'm learning more!

ah you have a point there - I didn't realise that was to show on every page

rats

Cheers
Paul

I'll need to check on this as I thought I could use the abovecontent position set that to hide on widescreen and then hide the sidebar2

Problem is it doesn't work