The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Header causing issues between ipad and computer views

View previous topic View next topic Go down

Solved Header causing issues between ipad and computer views

Post by troyeccles on March 10th 2014, 11:26 pm

Hello,

I had my forum set up just about right (the width looked good at 93%), the header size matched ok, etc) but when I viewed the site on the iPad, the header was way WAY too wide causing the overall width of the forum to shrink.

So I redesigned the header to a smaller size (930px) to suit the iPad but, lo and behold, the header now looks too small on the computer's browser.

iPad view (header is a fraction too wide for the forum):





Computer view (header is too narrow for the forum):




Are there any changes I can make so as the header and forum are the same width on all devices?

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by Ange Tuteur on March 11th 2014, 12:21 am

Hello troyeccles,

Add this to your CSS stylesheet :
Administration panel > display > colors > css stylesheet
Code:
#logo img { width:100%; }

It should resize the banner depending on screen width.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by troyeccles on March 11th 2014, 1:04 am

Sorry for the noob question but...how?
I go into the Admin panel-->Display-->Colors then switch to the CSS Stylesheet.

Then what?

I just add you code to the blank box and hit submit?
Or do I have to click the "See your forum's basic CSS" and then copy the whole code into the box, adding YOUR code.

If that's the case, does it matter where in that list of code it goes?

Thanks for your help, BTW! Very Happy

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by troyeccles on March 11th 2014, 1:07 am

Quick update:

I did the later; copied the entire CSS stylesheet into that empty box, copied you code into the top line, hit submit and...

Nothing?

Page seemed to load, went blank and that was that.
No change to the header image and when I re-checked the CSS stylesheet, your code wasn't there.

Clearly I'm not doing it right.

Sorry.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by SLGray on March 11th 2014, 1:08 am

Did you press the submit button?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36748
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by troyeccles on March 11th 2014, 1:12 am

Yeah. I'll try it in firefox. Safari seems to just do nothing (?!?!?!)

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by troyeccles on March 11th 2014, 1:15 am

Firefox does the same. I grab the entire existing code, copy it into that box, add in Ange's snippet, hit submit and the page seems to be uploading, then refreshing then...nothing. Gives me a blank page and when I re-check the CSS, it's not changed.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by Ange Tuteur on March 11th 2014, 1:15 am

Don't copy the entire basic CSS into the stylesheet, that will prevent simple changes from taking effect.

Delete all the code you copied into the sheet, and only paste this code into the blank textarea :
Code:
#logo img { width:100% !important; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by troyeccles on March 11th 2014, 1:16 am

That's it!!

You're a diamond. Lovely...THANK YOU!!!

Solved.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Header causing issues between ipad and computer views

Post by Ange Tuteur on March 11th 2014, 1:17 am

You're welcome :rose:

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum