Responsive Mobile Homepage (header.tpl)

[rockhost]

Hey Gang,

 

So, I've got my WHMCS installation looking pretty slick (if I don't say so myself). That is, on my laptop. The mobile design leaves a little to be desired.

 

While, I love that the fact that full website (slider template) has both the "search" and "transfer" functions, viewing on my iPhone squishes the form so much that typing is difficult.

 

How can I remove the "transfer" button for mobile visitors only?

 

Thanks in advance!

[Alistair]

You would need to use a media query in CSS to effectively say "If the device width is X width or less, don't display the class".

 

For example:

 

@media (max-width:320px) {
.class-of-the-element {
	display:none;
}
}

[rockhost]

Is 320px the standard for mobile devices? Place the code in custom.css, I suppose? Thanks!

[rockhost]

Thought I would follow up on this just in case anybody else was reading along now or in the future. Here's the fix. I added four lines of code to custom.css:

 

@media (max-width:320px) {

.transfers {

display:none;

}

}

 

Then I edited line 152 of header.tpl in my custom template which is built from "slider."

 

<input type="submit" name="transfer" class="btn btn-info transfers" value="Transfer" />

 

As you can see I snuck that extra "transfers" class into the input. Works great, even changes with landscape view on my iPhone 5.

 

Happy hosting!