ThistleProse 8 Share Posted September 29, 2019 Hello! Again 😛 Okay, so I have my profiles set out in a nice table, which I’ve set up to collapse neatly when on a mobile device so that it can still be read. The problem is, I want to make the two columns 50% of the width each. This works fine on the desktop view, but when you squish it down to mobile view, the columns are still 50% width, instead of being 100%, so they look really squished. How can I make them 50% each on big screens, and 100% when the screen size is much smaller? I’ve tried simple things like “min-width” and “max-width” attached to the @device code, but it doesn’t seem to be working. If anyone can help, I’d be very grateful! I’ve included two screenshots so that you can see what I mean, as I likely didn’t do a fantastic job describing the issue ^^; Link to comment Share on other sites More sharing options...
memoria 37 Share Posted September 29, 2019 To change the size on different devices, your CSS might look like this: .your-selector { width: 50%; } @media only screen and (max-width: 767px) { .your-selector { width: 100%; } } Or even this: .your-selector { width: 100%; } @media only screen and (min-width: 768px) { .your-selector { width: 50%; } } However, if you've done that and it's still not working, there might be other factors at work. For example, you said you designed as a table, but is it an actual table using table, tr, td, etc. HTML tags? If so, table cells don't naturally become full with no matter the CSS rules set, because they are meant to be aligned with each other. You might try additionally setting display: block when on mobile to change the table cell. .your-selector { width: 50%; } @media only screen and (max-width: 767px) { .your-selector { width: 100%; display: block; } } It's difficult to tell without seeing the actual code what is going on here. 2 Khyeras: an original fantasy RPG. "I keep wanting to write 'dwarves' as 'drawers'." "Land of the Drawers... we call it... Ikea." Link to comment Share on other sites More sharing options...
ThistleProse 8 Author Share Posted October 1, 2019 Hi @memoria! Thanks for the help so far! The profile is indeed all table, tr, td etc set up. I wanted to put it into divs, but I couldn't figure out how to do split cells in the divs, lol, so I stuck with the good old table xD I'm sorry, I didn't think to include the code for the template in question. I've included it below! Let me know if you need more info ❤️ Thanks again!! <style> @import url('https://fonts.googleapis.com/css?family=Bellefair|Bilbo+Swash+Caps|Fondamento|Indie+Flower'); .ProfileOutside {width: auto; height: auto; padding: 10px; border: 10px solid #{$userfields['fid33']}; border-radius: 50px 50px; line-height: 160%; color: #{$userfields['fid33']}; font-family: calibri; font-size: 15px; margin-left: auto; margin-right: auto; background-image: url("{$userfields['fid32']}"); background-repeat: repeat;} .ProfileInside {width: auto; padding: 5px; height: auto; border: 5px solid #{$userfields['fid33']}; margin-left: auto; margin-right: auto; background-color: rgba({$userfields['fid41']}, .9); border-radius: 50px 50px; white-space: pre-line;} .ProfileName {font-family: 'Fondamento', cursive; padding: 2px; letter-spacing: 5px; line-height: 1; font-size: 75px; color: #{$userfields['fid37']}; margin:auto; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};} .ProfileRank {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 7px; line-height: 0; font-size: 55px; padding: 10px 0px 10px 0px; text-align: center; color: #{$userfields['fid36']}; text-shadow: 0 -2px 3px #{$userfields['fid37']},0 3px 4px #{$userfields['fid37']};} /*Major Title Headers*/ .ProfileTitle2 {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 55px; color: #{$userfields['fid37']}; text-align: center; background-color:#{$userfields['fid35']}; border-radius: 10px; border: 8px; padding:8px; padding: 10px 50px 0px 0px; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};} /*Mini Title Headers*/ .ProfileTitle {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 35px; color: #{$userfields['fid50']}; text-align: center; background-color:#{$userfields['fid34']}; border-radius: 5px; border: 1px; padding:1px; padding: 0px 20px 0px 0px;} .ProfileJusitfy {font-family: Arial; font-size: 17px; padding: 0px 9px; text-align: justify; min-height: 150px; color: #{$userfields['fid36']};} .ProfileImage{margin-left: auto; margin-right:auto; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; max-width: 300px; min-width: 300px; padding:5px; color: #{$userfields['fid36']};} .ProfilePrompt1 {font-family: font-family: 'Bellefair', serif; font-size: 19px; color: #{$userfields['fid33']}; text-align: center; border-radius: 5px; border: 1px; padding:1px;} .ProfileSpaceFiller {min-height: 250px;} @media only screen and (max-width: 600px) { thead th:not(:first-child) { display: none; } td, th { display: block; } td[data-th]:before { content: attr(data-th); width: 100% !important; } .ProfileName {line-height: 1 !important; font-size: 45px !important;} .ProfileImage {max-width: 150px !important;} } </style> <div class="ProfileOutside"><div class="ProfileInside"> <table width="100%" height="auto" border="0" class="ProfileJusitfy" cellpadding="5px"> <tr valign="top"><td colspan="5" data-th><div class="ProfileName" align="center">{$userfields['fid7']}</div> <div class="ProfileRank" align="center"><if $userfields['fid30'] then> <func htmlspecialchars_uni>{$userfields['fid30']}</func></if> {$userfields['fid4']}</div><br /></td> </tr> <tr valign="top"> <td width="36%" rowspan="6" align="center" valign="top" data-th><img src="{$userfields['fid38']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> <td colspan="3" data-th><div class="ProfileTitle">Nicknames:</div> {$userfields['fid5']}</td> <td data-th><div class="ProfileTitle">Occupation:</div> {$userfields['fid6']}</td> </tr> <tr valign="top"> <td colspan="3" data-th><div class="ProfileTitle">Date of Birth:</div> {$membday} {$membdayage}</td> <td data-th><div class="ProfileTitle">Age Apparent:</div> {$userfields['fid8']}</td> </tr> <tr valign="top"> <td colspan="3" data-th><div class="ProfileTitle">Biological Sex:</div> {$userfields['fid42']}</td> <td data-th><div class="ProfileTitle">Gender Apparent:</div> {$userfields['fid43']}</td> </tr> <tr valign="top"> <td colspan="3" data-th><div class="ProfileTitle">Pronouns:</div> {$userfields['fid44']}</td> <td data-th><div class="ProfileTitle">Partner:</div> {$itscomplicatedRelationships}</td> </tr> <tr valign="top"> <td colspan="3" data-th><div class="ProfileTitle">Player:</div> {$masteraccount}</td> <td data-th><div class="ProfileTitle">Inactivity Preference:</div> {$userfields['fid29']}</td> </tr> <tr valign="top"> <td colspan="4" data-th height="100%"> </td> </tr> <tr valign="top"><br /> <td colspan="5" data-th><div class="ProfileTitle2">Appearance</div><br /></td> </tr> <tr valign="top"> <td data-th><div class="ProfileTitle">Eye Colour:</div> {$userfields['fid9']}</td> <td colspan="3" data-th><div class="ProfileTitle">Hair Colour:</div> {$userfields['fid10']} <td rowspan="3" valign="top" data-th align="center"><img src="{$userfields['fid39']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> </tr> <tr valign="top"> <td data-th><div class="ProfileTitle">Height:</div> {$userfields['fid11']}</td> <td colspan="3" data-th><div class="ProfileTitle">Build:</div> {$userfields['fid46']}</td> </tr> <tr valign="top"> <td colspan="4" data-th><div class="ProfileTitle">General Description:</div> {$userfields['fid13']} <div class="ProfileTitle"></td> </tr> <tr valign="top"> <td colspan="5" data-th><div class="ProfileTitle">General Dressing Style:</div> {$userfields['fid12']}</td> </tr> <tr valign="top"> <td colspan="5" data-th style="tablepadding"><div class="ProfileTitle2">Personality</div><br /></td> </tr> <tr valign="top"> <td rowspan="2" valign="top" data-th align="center"><img src="{$userfields['fid40']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> <td colspan="3" data-th><div class="ProfileTitle">Likes:</div> {$userfields['fid15']}</td> <td data-th><div class="ProfileTitle">Dislikes:</div> {$userfields['fid16']}</td> </tr> <tr valign="top"> <td colspan="3" data-th><div class="ProfileTitle">Strengths:</div> {$userfields['fid17']}</td> <td data-th><div class="ProfileTitle">Flaws:</div> {$userfields['fid18']}</td> </tr> <tr valign="top"> <td colspan="5" data-th><div class="ProfileTitle">General Personality:</div> {$userfields['fid14']}</td> </tr> <tr valign="top"> <td colspan="5" data-th><div class="ProfileTitle2">History</div><br /></td> </tr> <tr valign="top"> <td data-th><div class="ProfileTitle">Parents:</div> {$userfields['fid20']}</td> <td colspan="3" data-th><div class="ProfileTitle">Past Romances:</div> {$userfields['fid23']}</td> <td rowspan="3" valign="top" data-th align="center"><img src="{$userfields['fid47']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> </tr> <tr valign="top"> <td data-th><div class="ProfileTitle">Siblings:</div> {$userfields['fid22']}</td> <td colspan="3" data-th><div class="ProfileTitle">Offspring:</div> {$userfields['fid24']}</td> </tr> <tr valign="top"> <td colspan="4" data-th height="100%"></td> </tr> <tr valign="top"> <td colspan="2" width="50%" data-th><div class="ProfileTitle">Secrets:</div> {$userfields['fid48']} <div class="ProfileTitle"></div> </td> <td data-th width="2px"> </td> <td colspan="2" data-th width="50%"><div class="ProfileTitle">General Knowledge:</div> {$userfields['fid49']}</td> </tr> <tr valign="top"> <td colspan="5" data-th><div class="ProfileTitle">Detailed History:</div> {$userfields['fid25']}</td> </tr> <tr> <td colspan="4"> </td> <td colspan="2"> </td> </tr> <tr> <td colspan="4"> </td> <td colspan="2"> </td> </tr> </table> </div> </div> Link to comment Share on other sites More sharing options...
ThistleProse 8 Author Share Posted October 1, 2019 Hi again! I added min-width: 100% to the code, and now it works 😄 @media only screen and (max-width: 600px) { thead th:not(:first-child) { display: none; } td, th { display: block; min-width: 100%; } td[data-th]:before { content: attr(data-th); width: 100% !important; } .ProfileName {line-height: 1 !important; font-size: 45px !important;} .ProfileImage {max-width: 150px !important;} } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now