SimplePortal
Customization => Themes and Graphics => Topic started by: 420connect on July 06, 2015, 01:49:31 PM
-
I've recently updated my theme to become mobile friendly and whilst viewing the forum on a mobile-device, I have chosen to hide my side column completely.
My issue is, the side column contained a banner I *need* to have on show, so am having a new horizontal banner made up..
My question is could anyone help with some code that would only enable a block (the new horizontal banner) when it is being viewed by a mobile device?
basically a sort of PHP version of:
IF (side column) = hidden THEN show (horizontal banner) instead..
:thumbsup:
A million thanks to anyone who's able to help! :)
-
This should help: http://simpleportal.net/index.php?topic=13964 :)
-
More specifically, this post:
http://simpleportal.net/index.php?topic=13964.msg69287#msg69287
-
Forgive me if I've missed something, but this is what I've already achieved myself.. (hiding the side column on mobile devices)
I'm looking for a way to detect that the side columns are hidden, then activate a new 'top/header' block.. :P
-
And... Do exactly the opposite with that block? That's the same thing reversed.
-
I think I "see" what I wasn't before :P :applause:
although how I'm trying to do it, doesn't seem to be working..
I've got
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {
#sp_right {
display: none;
}
#sp_header, sp_footer {
display: block;
width: auto !important;
padding: 0;
}
and further up the page where #sp_header, sp_footer is mentioned I had:
#sp_header, #sp_footer
{
display: none;
}
I'm trying to have the header and footer blocks, hidden on big screens but shown on small and the side block, in reverse.. :-[
Appreciated if you can put me right!
-
Hmm, odd. URL maybe? :)
-
420Connect.co.uk ~ Thanks for having a look! :)
My Portal.css ~ http://pastebin.com/q8aDqtie
just to add, I've just noticed my shoutbox has gone strange looking..
would my edits have caused this? o.O
(http://snag.gy/bfKRQ.jpg)
-
Not sure what it's wrong... It works here. Did you flush your forum & browser cache? :P
-
Ahh, it was just a delay in the css updating..
My apologies! :P
.. I'm trying the same idea to change from on a big screen: 2 ads next to each other
and on small screen: one ad shows.
I've got one set in the 'bottom' blocks and one set in the 'footer' blocks but, it looks as if "sp_bottom" doesn't exist? o.O
-
Ahh, it was just a delay in the css updating..
My apologies! :P
I figured, np ;D
.. I'm trying the same idea to change from on a big screen: 2 ads next to each other
and on small screen: one ad shows.
I've got one set in the 'bottom' blocks and one set in the 'footer' blocks but, it looks as if "sp_bottom" doesn't exist? o.O
Yup, they are sp_footer, not sp_bottom. I'd suggest to use the block ID to create the selector, it's the best way that will never cause issues with other elements.
For example, to indicate your ads block (desktop version) I'd use this:
td#sp_center div#sp_block_75
{
css properties
}EDIT: fixed the typo
-
Just to be sure I've got this right: (and whilst waiting it to update)
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {
#sp_right {
display: none;
}
#sp_header, #sp_footer {
display: block;
width: auto !important;
padding: 0;
}
div#sp_center div#sp_block_75 {
display: none;
}
}
-
Typo on my part, sorry. It's td#sp_center instead of div#sp_center. Too much beer I guess, ahah ;D
Besides, if you want to update and see the changes immediately, usually a ctrl+f5 works ;)
-
Woo hoo! 8)
Thanks again for saving the day with your ninja magic! :) :applause: :thumbsup:
-
^_^ glad to be helpful! You can mark the topic as solved, however, I'd suggest to edit the code a little, at least the one you use for the ads block, since it shows 2 ads as if they were a list, and the bottom one is 1px more on the right. This is probably due to the code you used, I bet you did a between the 2 ads, which could cause such slightly broken layout in these cases.