Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: FragaCampos on November 03, 2019, 02:15:59 PM

Title: Help with theme layout breakdown
Post by: FragaCampos on November 03, 2019, 02:15:59 PM
Hi there.

I have a little problem with my layout for many years and I would like to try and solve it once and for all.
My theme was bought from DzinerStudio, but, unfortunately, they're not around anymore, so I decided to ask for help here.

Below there's screenshot from my forum of how it should look with 100% in Firefox and another one with the layout breakdown on the right (when it is actually with the zoom at 100%). This is caused by the message n. 8, probably due to its code or quote box.
How can I fix this?

Regards.

https://imageshack.com/a/img922/1014/fMN0xm.png
https://imageshack.com/a/img921/5669/N4TDaH.png
Title: Re: Help with theme layout breakdown
Post by: Antechinus on November 03, 2019, 04:59:24 PM
A direct link to the thread would be handy. ;)
Title: Re: Help with theme layout breakdown
Post by: FragaCampos on November 04, 2019, 08:12:15 PM
Of course  ::)

Here it goes:
https://www.docspt.com/index.php?topic=822.0
Title: Re: Help with theme layout breakdown
Post by: Biology Forums on November 05, 2019, 12:40:35 AM
Quote from: FragaCampos on November 04, 2019, 08:12:15 PM
Of course  ::)

Here it goes:
https://www.docspt.com/index.php?topic=822.0

It requires a login
Title: Re: Help with theme layout breakdown
Post by: FragaCampos on November 06, 2019, 01:25:00 PM
Yes, it does.
It's public and free.



Quote from: Biology Forums on November 05, 2019, 12:40:35 AM
Quote from: FragaCampos on November 04, 2019, 08:12:15 PM
Of course  ::)

Here it goes:
https://www.docspt.com/index.php?topic=822.0

It requires a login
Title: Re: Help with theme layout breakdown
Post by: Shambles on November 06, 2019, 01:57:33 PM
Can you not provide test login credentials?
Title: Re: Help with theme layout breakdown
Post by: Mick. on November 06, 2019, 02:32:53 PM
It could be a missing </div>? Or that portal is throwing everything out of whack
Title: Re: Help with theme layout breakdown
Post by: FragaCampos on November 08, 2019, 10:29:36 AM
Sure. I should have provided that beforehand.  O:)
Here it is:
SMF_test
SMF_test
[email protected]

Quote from: Shambles on November 06, 2019, 01:57:33 PM
Can you not provide test login credentials?



It's normal that you see it that way. The template is not responsive, so it's not prepared for viewing with a celular.

Quote from: Mick. on November 06, 2019, 02:32:53 PM
It could be a missing </div>? Or that portal is throwing everything out of whack
Title: Re: Help with theme layout breakdown
Post by: Antechinus on November 19, 2019, 03:29:13 PM
If this is still a problem: how about making a disposable test topic, on a publicly viewable page, that contains similar content to the problematic topic. It can be all Lorem Ipsum if you like, as long as it contains the same elements (divs, quotes, code, whatever). That way nobody has to frig around with test accounts (I noticed the one you gave earlier no longer works) and can just throw dev tools at the problem without having to jump through any hoops.
Title: Re: Help with theme layout breakdown
Post by: FragaCampos on December 05, 2019, 09:19:45 PM
Bummer, don't know what went wrong with that account. :/
Sorry about that.

I've been so overwhelmed with work in the past weeks that I didn't even have time to look into this.
Let me just have some room to breath here and I'll come back to this.

Thank you for your time.
Title: Re: Help with theme layout breakdown
Post by: FragaCampos on October 12, 2020, 11:44:21 AM
After all this time, here I am again to ask your help with this issue.

I posted a message with the nested code that causes the break in the layout.
It's open to visitors, so no registration needed:
https://www.docspt.com/index.php?topic=35680.msg123661#msg123661


Regards.
Title: Re: Help with theme layout breakdown
Post by: Antechinus on October 12, 2020, 04:49:32 PM
Well that was easy. You've set a fixed width on your code blocks.

code.bbc_code {
    display: block;
    font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
    font-size: x-small;
    color: #ccc;
    background: #404040;
    border-left: 5px solid #ac533c;
    border-right: 5px solid #ac533c;
    line-height: 1.5em;
    padding: 3px 1em;
    overflow: auto;
    white-space: nowrap;
    width: 88em;
    max-height: 24em;
}


Change it to max-width: 88em; and it should be fine (so obvious that I didn't even bother testing it).
Title: Re: Help with theme layout breakdown
Post by: FragaCampos on October 15, 2020, 05:28:52 PM
That's what happens when someone who doesn't know how to do something tries to do it blindly...  ::)

Thank you very much for your help. Now the page is displaying correctly.  8)