Change Topic Title width and height

Go down

Solved Change Topic Title width and height

Post by Valoish on Fri 25 Nov 2016 - 18:01

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : http://image.prntscr.com/image/dc8eab4b13c442058bede354d76d196e.png
Who the problem concerns : All members
When the problem appeared : Today
Forum link : http://www.canvasforums.com

Description of problem

Is there a way to change the textarea/input width for topic titles? I have a topic title colorizer thing on my forum, but since I increased the padding on the dropdown menus the colorizer shifted under the topic title field. It used to be next to it.

Also, is there a way to change the height/add padding to the input area so that it's the same height as the dropdown
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Change Topic Title width and height

Post by Luffy on Fri 25 Nov 2016 - 22:05

Hello @Valoish,

How long in pixels you want the input to be?
You can use this code for it's width and height:
Code:
input.post
but this will change the bottom 2 as well. If you want only the title input to change then you can use this one:
Code:
input.post[name="subject"]
avatar
Luffy
Manager
Manager

Male Posts : 5553
Reputation : 616
Language : Greek, English
Location : Greece

https://help.forumotion.com

Back to top Go down

Solved Re: Change Topic Title width and height

Post by Valoish on Fri 25 Nov 2016 - 23:43

@Luffy,

I'm not too sure how many pixels.. I'd prefer for it to be responsive (so percentages, I guess) so that it looks good on all screen resolutions.
I played around with the code you gave me and I made the input areas and the topic color selector float left. It looks fine on PC but when I open it on mobile its still misaligned x_x
Any way to fix it for mobile? Or would I just use a media query and adjust the CSS values that way?

Edit: I figured it out~! Now it works well on both PCs and Mobile Devices

This is the CSS I added:
Code:
input.post, textarea.post { float: left; }

select[name=topic_color] { float: left; }

@media only screen and (min-device-width: 320px) and (max-device-width: 485px) { input.post[name="subject"] { width: calc(100% - 176px)!important; } }

Thanks for your help, Luffy! ^^
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Change Topic Title width and height

Post by Luffy on Fri 25 Nov 2016 - 23:59

Sure thing! No problem! Have a nice day!

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
avatar
Luffy
Manager
Manager

Male Posts : 5553
Reputation : 616
Language : Greek, English
Location : Greece

https://help.forumotion.com

Back to top Go down

Back to top


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