CSS Question - Hiding one element of #Panel...Still shows up in Mobile Browser

kirkpa31

I'm hiding the 'Sign In' button on the Guest Box on the main discussions controller so that only 'Register' appears. I found this to be redundant with the Sign In link on the toolbar. My CSS code is as follows:

To hide the 'Sign In' button:

body.Discussions a.Button.SignInPopup {
display: none;
}

This hides the button for my desktop and for an iPad, but the 'Sign In' button still appears on my mobile Android browser. Hiding the entire Guest Box using div.Box.GuestBox { display: none; } hides everything in the mobile browser.

Does anyone know why I cannot seem to hide individual elements like this for just mobile displays? I have tried everything.

Using Vanilla v.2.0.18.8

vrijvlinder

You need to change the css in the mobile theme to affect the mobile view. Use a user agent switcher to look at the mobile view in your browser and pick those selectors out.

The selectors may be called something else.

.Banner ul li.SignInItem a

kirkpa31

Thanks! I had never heard of a user agent switcher before - really helpful!

vrijvlinder

try this one

http://chrispederick.com/work/user-agent-switcher/help/#install

then download the user agent list and install it . It is very helpful for sure.

kirkpa31

EDIT

Using Google Chrome User Agent Switcher The selectors are unfortunately titled the same in both the mobile view and my default view - I will continue to play around with this switcher and css - hopefully something clicks!

but i will download your recommendation and see what happens

vrijvlinder

this one has more variety of all existing agents and OS versions of those.

If the selectors are the same just apply the same rule but add display: none!important;

kirkpa31

My issue is that the 'Sign In' button is labeled as a.Button and the 'Register' button is labeled as a.Button.ApplyButton according to the mobile browser switching agent

So setting a.Button to display:none removes both of them.

I'm currently trying to figure out how to change the class name of the 'Sign In' button from just Button to perhaps Button SignIn which works when I type it into Firebug - then setting display: none for a.Button.SignIn

Shadowdare

Would you post the HTML code of the GuestBox of your mobile theme?

vrijvlinder

no you don't need to change the class, simply include the other selectors before it like the example I gave above.

look at the class of li or ul the links are in

then you would use something for this

<li class="SignInItem"><a href="/forum/entry/signin" class="SignIn">Sign In</a></li>

the css

li.SignInItem a.SignIn{
display:none!important;
}

kirkpa31

My code is as follows:

<div class="Box GuestBox">
<h4>Welcome!</h4>
<p>Sign in below or register for free instant access!</p>
<div class="P">
<a class="Button" href="/entry/signin?Target=discussion%2F195%2Fsample-discussion-">Sign In</a>
<a class="Button ApplyButton" href="/entry/register?Target=discussion%2F195%2Fsample-discussion-">Register for Free</a>
</div>
</div>

The Sign In and Register links are not part of a list - just separate classes - so I cannot unfortunately separate them further that way

vrijvlinder

another example

<li class="NonTab"><a class="SignInPopup" href="/forum/entry/signin?Target=discussions"></a></li>

the css

li.NonTab a.SignInPopup,  {
display:none!important;
}

another example

<div class="Box GuestBox">
   <h4>Welcome</h4>
   <p>Please Register To Post </p>

<div class="P">< a href="/forum/entry/signin?Target=discussions" class="Button SignInPopup">Sign In</a></div >

.Box.GuestBox .P a.Button.SignInPopup{
display:none!important;
}

kirkpa31

Thank you for the examples!

However - the class given in your examples is "Button SignInPopup" whereas the class with my element is just "Button"

That successfully hides it from all browsers except mobile - where the class is just "Button"

vrijvlinder

for this I think you could use

<div class="P">
<a class="Button" href="/entry/signin?Target=discussion%2F195%2Fsample-discussion-">Sign In</a>

the css

.Box.GuestBox .P a.Button{
display:none!important;
}

Shadowdare

To select only the sign in button, use this:

.GuestBox a:first-child { display: none; }

kirkpa31

@vrijvlinder That unfortunately removed both of the buttons. Thank you for your persistence though!

@shadowdare That worked perfectly! I had no idea that was even a command! Very useful.

Thank you both!

vrijvlinder

shadowdare is the Bomb !! I was going to suggest that but I had to go out.

this one would also work but you need to add display:block!important on the one you would want to be seen . I like shadowdare's soution much more

.Box.GuestBox .P a.Button{
display:none;
}

.Box.GuestBox .P a.Button.ApplyButton{
visibility:visible; 
display:block!important;
}

kirkpa31

learning never stops with this forum...Thanks!

newzealandgirls

Hello,
.css for mobile is set to

.RandomImage {display:none !important;}

RandomImage {display:none !important;}

Yet it still shows in mobile view , the RANDOM IMAGE plugin shows images outside of viewport in MOBILE - so I am using .css to remove them but it's not working...

The element falls outside the viewport.

vrijvlinder

when you say css is set to display none on mobile, do you mean you added that to the mobile theme css?

Plugin css has priority over themes css. You need to add some code so it does not display on mobile, css is not enough...

something like this for every controller that displays the images

public function DiscussionsController_Render_Before($Sender) {
if(IsMobile()){
 return;
}else{
$this->_AddResources($Sender);
}

public function CategoriesController_Render_Before($Sender) {
if(IsMobile()){
 return;
}else{
$this->_AddResources($Sender);
}