Change Topic Title width and height

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

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"]

@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! ^^

Sure thing! No problem! Have a nice day!

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