[Omniscient]

Looks like I broke the responsive theme somehow.

Not sure WTF I did. response.css has a bug....

We should look like this:



Instead we look like this:




The forums are pushed down. Inline-block screwed up.

What did I change. There was a typo in the css as td-foat-right, changed it to td-float-right. I attempted top undo the changes. No good.

Frustrating. It still seems fine on the old BLUE MOBALE theme for some reason but we've done many edits.

One difference from an issue in convo is this css:

In blue it's:
.mobile-link-truncate {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
}

That was changed because of convo fix....

It's now....

.mobile-link-truncate {
text-overflow: ellipsis;
word-break: break-word;
overflow-wrap: anywhere;
}

I just added a definition to response.css and changed the name of the css in the template, didn't seem to work.

.mobile-link-truncate-forum {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
}

10k bytes to anyone who can fix the theme css without breaking some other element.


HELP! Any CSS pro who can figure this out asap? Will also grant an award too.

[Sky]

$50 BTC for whoever fixes the issue.
Per me.

[Omniscient]

Figured it out.

It's a "float-left" css without the actual "float:left" definition. Not sure why it works on the other themes that don't have it. CSS is touchy.



Looks like nobody gets the bounty. Sorry.

[Omniscient]

It's weird because none of the other theme colors (still in DB, just in case) have the float:left definition but it still works. It was obviously intended to have it based on the css name. The .td-float-right css has it.

It's amazing I haven't broken more of HF. But it's why I don't like touching it. The smallest change creates crazy effects. Elements get moved around all over the place. And you have to deal with the desktop and responsive design on the same page. It's kind of a nightmare really.

We're lucky to have a mobile version of our site that functions imho.

[Syndicate]

We're lucky to have a mobile version of our site that functions imho.

Honestly the mobile version works pretty well too. I'm on mobile now and browsing around. Haven't had any issues

[Nolor56]

Looks like I broke the responsive theme somehow.

Not sure WTF I did. response.css has a bug....

We should look like this:



Instead we look like this:




The forums are pushed down. Inline-block screwed up.

What did I change. There was a typo in the css as td-foat-right, changed it to td-float-right. I attempted top undo the changes. No good.

Frustrating. It still seems fine on the old BLUE MOBALE theme for some reason but we've done many edits.

One difference from an issue in convo is this css:

In blue it's:
.mobile-link-truncate {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
}

That was changed because of convo fix....

It's now....

.mobile-link-truncate {
text-overflow: ellipsis;
word-break: break-word;
overflow-wrap: anywhere;
}

I just added a definition to response.css and changed the name of the css in the template, didn't seem to work.

.mobile-link-truncate-forum {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
}

10k bytes to anyone who can fix the theme css without breaking some other element.


HELP! Any CSS pro who can figure this out asap? Will also grant an award too.

Hello, I'm not an expert but I leave you this information in case it helps you. It may be that it points to the fact that The problem is changing the visual behavior without adjusting the structure of the container, right?

Reset.mobile-link-truncate to display: table-cell

The old definition:
.mobile-link-truncate {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
}

it worked properly. The change to a line structure with word-break and overflow-wrap has already broken the flow of the layout. Proposal: to reverse that change in response.css.
.mobile-link-truncate {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

If you want to continue truncating long words, you can combine it with:
.mobile-link-truncate {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 1px; /*Or flexible width */
}

Adjust.mobile-link-truncate-forum
Assuming you intend to use for mobile forums:
.mobile-link-truncate-forum {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
And make sure that the parent container is a display: table-row or.parent { display: table; width: 100%; }.

Something with Inline-Block went bad. If any cell used display: inline-block, it was better to use:
.container, .tr, .td {
display: table;
table-layout: fixed;
width: 100%;
}
And then the.td-float-right cells with float: right; width: auto;

Conclusion In response.css, revert.mobile-link-truncate to display: table-cell. Make sure that the parent container has display: table or table-row. Apply the same style to.mobile-link-truncate-forum if you're using that selector. Check that you're not mixing inline-block with floats inside.


I don't know if this will help you but look at it just in case

[Omniscient]

Nolor56 quality response, thanks...

I undid the .mobile-link-truncate this morning. I remembered why I did it. Because this thread was breaking layout...

Graphics Market

It's the graphics market.

Right now everything appears normal again and let's hope that remains so. Not sure I want to toy around with it more, I just want it stable.

[Nolor56]

Nolor56 quality response, thanks...

I undid the .mobile-link-truncate this morning. I remembered why I did it. Because this thread was breaking layout...

Graphics Market

It's the graphics market.

Right now everything appears normal again and let's hope that remains so. Not sure I want to toy around with it more, I just want it stable.

Oh okay, you're welcome, so the problem is already solved? Is everything going well yet?

[Omniscient]

Oh okay, you're welcome, so the problem is already solved? Is everything going well yet?

Far as I know. It all looks 100%.

[Nolor56]

Far as I know. It all looks 100%.

Oh great, it's good that everything is going well

[jcole]

$50 BTC for whoever fixes the issue.
Per me.

Looks like Omni gets that $50 🤭

[Omniscient]

Looks like Omni gets that $50 🤭

I didn't accept it.

[Tyr]

$50 BTC for whoever fixes the issue.
Per me.

what a lad!