What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Help Mobile Friendly

Ronan

debussy.
Hello! I’m looking for - what I hope to be - quick help in fixing a code and making it mobile friendly. Here’s what it looks like:

SLEEP NOW, SWEET MOLLY.
[MISSING] has told me about the [MISSING], about the Gods and their love. But, do the Gods love their creations? I am an automaton created by human hands, would you ever think to love me? Of course, I do love you, isn't that how you've made me?

And here is the code!

Code:
[imagefloat=left][div class="bbWrapper"][div style="background-color:#74645A; height:100px; margin:auto; padding:5px;"][div style="background-color:#CFB09B; height:80px; padding:10px; color:#fff; font-size:12px; line-height:12px; text-align:justify; margin:auto;"][class=blackWhite]width:90px; flex-grow:1; opacity:0.5; filter:grayscale(100%);[/class][class name=blackWhite state=hover] filter:grayscale(0%); opacity:1; transition: all .5s ease;[/class][div class=blackWhite][div style="float:left; background-image: url(http://i66.tinypic.com/okpe9d.jpg); height: 80px; width: 80px; background-size:110%; background-position:auto; border:1px solid #fff; padding:0px;"][/div][/div][/div][div style="position:relative; bottom:95px; left:100px;"][div style="font-family: 'times'; font-size: 20; color: #61574E"][B]SLEEP NOW, SWEET MOLLY.[/B][/div][div style="color:#61574E; font-size:10px; line-height:11px; overflow: hidden; text-align:justify; text-transform: uppercase; margin-right:104px;"][B][MISSING][/B] has told me about the [B][MISSING][/B], about the Gods and their love. But, do the Gods love their creations? I am an automaton created by human hands, would you ever think to love me? Of course, I do love you, isn't that how you've made me?[/div][/div][/div][/div][/imagefloat]
Thank you so much!
 

Alteras

The Sleepy One
Moderator
Supporter
so, uhh, a few things. With classes, you can keep them separated from the code, and just use [nobr][/nobr] to not have line breaks. You don't have a bbWrapper class for your div to use. And you should probably get rid of the imagefloat left and just use max-width: instead. Set it to something like 400px, and set a width to 100%
 

Ronan

debussy.
@Alteras thank you so much! You are a life-saver! I just have two more questions; this is the new code now:

SLEEP NOW, 'GOOD' MOLLY.
[MISSING] has told me about the [MISSING], about the Gods and their love. But, do the Gods love their creations? I am an automaton created by human hands, would you ever think to love me? Of course, I do love you, isn't that how you've made me?


Code:
[nobr][div style="background-color:#74645A; height:100px; max-width: 400px; width: 100%; margin:auto; padding:5px;"][div style="background-color:#CFB09B; height:80px; padding:10px; color:#fff; font-size:12px; line-height:12px; text-align:justify; margin:auto;"][class=blackWhite]width:90px; flex-grow:1; opacity:0.5; filter:grayscale(100%);[/class][class name=blackWhite state=hover] filter:grayscale(0%); opacity:1; transition: all .5s ease;[/class][div class=blackWhite][div style="float:left; background-image: url(http://i66.tinypic.com/okpe9d.jpg); height: 80px; width: 80px; background-size:110%; background-position:auto; border:1px solid #fff; padding:0px;"][/div][/div][/div][div style="position:relative; bottom:95px; left:100px;"][div style="font-family: 'times'; font-size: 20; color: #61574E"]SLEEP NOW, 'GOOD' MOLLY.[/div][div style="color:#61574E; font-size:10px; line-height:11px; overflow: hidden; text-align:justify; text-transform: uppercase; margin-right:104px;"][MISSING] has told me about the [MISSING], about the Gods and their love. But, do the Gods love their creations? I am an automaton created by human hands, would you ever think to love me? Of course, I do love you, isn't that how you've made me?[/div][/div][/div][/nobr]

The first is, the code on mobile goes off the screen. What's the best way to amend that? And second, is there anyway to get it on the left side of the screen with regular text around it? the [imagefloat=left][/imagefloat] was my solution to that, but as you pointed out, that doesn't work.
 
Last edited:

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top