Jump to content

Width Issues with Device & Desktop versions


ThistleProse
 Share

Recommended Posts

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 ^^;

 

1D1F9B4E-1141-4C26-9AAE-F67A5E63F580.jpeg

65AE68DF-40F2-4B94-ABD5-EF0C1EA880E3.jpeg

HaLp2lk.png
October-2017.png 

Link to comment
Share on other sites

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.

  • Agree 2

banner-01-88x31.jpg
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

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%">&nbsp;</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">&nbsp;</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">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>


    </div>
</div>

HaLp2lk.png
October-2017.png 

Link to comment
Share on other sites

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;}
    }

HaLp2lk.png
October-2017.png 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.