Responsive - Hiding/showing elements with CSS

Started by BugginIn, February 26, 2023, 12:04:05 PM

Previous topic - Next topic

BugginIn

Hello all,

Hoping someone knows the answer here. And yes, let's assume theme creator won't be back or hasn't for awhile. Let's talk on any theme in general.

I believe this below error would be in the responsive.css of the theme.

Elements not showing or if you need to hide columns with CSS.

Theses aren't working on the responsive.css file - gave a little more, but hardly anything. What would you do?



td.stats {
        display: none !important;
    }
th.centertext {
        display: none !important;
    }
first_th hidden {
        display: none !important;
    }






 

Thank you,

BugginIn

TwitchisMental

Do you have any mods installed?

This theme should be hiding those sections by default at 480px.

What is your resolution when this happens?

BugginIn

Hello TwitchisMental,

Yes have mods installed but uninstalled the two I thought was affecting this - beleive they were seperate views/replies and avatar on board index. put it back where it was.

Not sure on resolution answer - attached is the CSS file.

Guessing that is controlled by this line? @Media screen and (min-width: 240px) and (max-width: 640px)


Thank you,

BugginIn

TwitchisMental

The issue you seem be facing, is due to what you have added.

td.stats {
        display: none !important;
    }
th.centertext {
        display: none !important;
    }
first_th hidden {
        display: none !important;
    }


If you remove that, the theme should work as intended. If not, maybe you could elaborate on what you are trying to do specifically.

BugginIn

OH WOW... I just deleted that on the responsive.css file.

Cleared SMF cache, browser cache and phone cache... Now on regular browser it swapped columns "Last Post" into views and replies. I didn't think the responsive CSS file could do that...

The phone now looks like this below.

Trying to either fill in the replies/views on responsive or just not show it... So no half empty cell screen.
...
Now for online browser, have no clue how to fix this one that just swapped the columns... Weird...





Attached the modieifed CSS file too...


Thank you,

BugginIn



TwitchisMental

I think I see what you are trying to do.

Try using the responsive.css I have attached below.

BugginIn

I have been scrolling threads here on CSS and Responsive, and I have come to the conclusion I am the first to swap columns like and idiot here in this entire community... NICEEEE

So, if I change only the responsive.css file in the theme folder, that doesn't change anything else like the index.css file somehow?

P.S. - I have been at this for days, I better take a break before I become super idiot of the SMF community...  :D

Thank you,

BugginIn

TwitchisMental

Quote from: BugginIn on February 26, 2023, 03:42:48 PMI have been scrolling threads here on CSS and Responsive, and I have come to the conclusion I am the first to swap columns like and idiot here in this entire community... NICEEEE

So, if I change only the responsive.css file in the theme folder, that doesn't change anything else like the index.css file somehow?

P.S. - I have been at this for days, I better take a break before I become super idiot of the SMF community...  :D

Thank you,

BugginIn
It does not.

I believe I have figured out the issue that you are having. Try replacing your responsive.css with the one I have provided above. Pretty sure that will do the trick :).

BugginIn

Quote from: TwitchisMental on February 26, 2023, 03:41:20 PMI think I see what you are trying to do.

Try using the responsive.css I have attached below.

Nope, That didn't do it, loaded that into theme css folder... Should I try loading into default theme css folder too?


BugginIn

Quote from: TwitchisMental on February 26, 2023, 03:46:36 PM
Quote from: BugginIn on February 26, 2023, 03:42:48 PMI have been scrolling threads here on CSS and Responsive, and I have come to the conclusion I am the first to swap columns like and idiot here in this entire community... NICEEEE

So, if I change only the responsive.css file in the theme folder, that doesn't change anything else like the index.css file somehow?

P.S. - I have been at this for days, I better take a break before I become super idiot of the SMF community...  :D

Thank you,

BugginIn
It does not.

I believe I have figured out the issue that you are having. Try replacing your responsive.css with the one I have provided above. Pretty sure that will do the trick :).

Nope, crazy wierd....

TwitchisMental

Quote from: BugginIn on February 26, 2023, 03:49:16 PM
Quote from: TwitchisMental on February 26, 2023, 03:46:36 PM
Quote from: BugginIn on February 26, 2023, 03:42:48 PMI have been scrolling threads here on CSS and Responsive, and I have come to the conclusion I am the first to swap columns like and idiot here in this entire community... NICEEEE

So, if I change only the responsive.css file in the theme folder, that doesn't change anything else like the index.css file somehow?

P.S. - I have been at this for days, I better take a break before I become super idiot of the SMF community...  :D

Thank you,

BugginIn
It does not.

I believe I have figured out the issue that you are having. Try replacing your responsive.css with the one I have provided above. Pretty sure that will do the trick :).

Nope, crazy wierd....
Could you by chance provide a link to your forum?

BugginIn

Quote from: TwitchisMental on February 26, 2023, 03:51:58 PM
Quote from: BugginIn on February 26, 2023, 03:49:16 PM
Quote from: TwitchisMental on February 26, 2023, 03:46:36 PM
Quote from: BugginIn on February 26, 2023, 03:42:48 PMI have been scrolling threads here on CSS and Responsive, and I have come to the conclusion I am the first to swap columns like and idiot here in this entire community... NICEEEE

So, if I change only the responsive.css file in the theme folder, that doesn't change anything else like the index.css file somehow?

P.S. - I have been at this for days, I better take a break before I become super idiot of the SMF community...  :D

Thank you,

BugginIn
It does not.

I believe I have figured out the issue that you are having. Try replacing your responsive.css with the one I have provided above. Pretty sure that will do the trick :).

Nope, crazy wierd....
Could you by chance provide a link to your forum?


https://tristatesurvival.com/index.php?board=6.0

Yeah - I'm not sure what I did here like a moron...

TwitchisMental

In responsive.css -

Go to line 195

Find
.hidden, .icon, .stats, #posting_icons, #mlist th, .icon1, .icon2
{
display: none;
}

Replace With
.hidden, .icon, #posting_icons, #mlist th, .icon1, .icon2
{
display: none;
}

TwitchisMental

Quote from: TwitchisMental on February 26, 2023, 03:59:17 PMIn responsive.css -

Go to line 195

Find
    .hidden, .icon, .stats, #posting_icons, #mlist th, .icon1, .icon2
    {
        display: none;
    }

Replace With
    .hidden, .icon, #posting_icons, #mlist th, .icon1, .icon2
    {
        display: none;
    }

In addition to this, replace your messageindex.template.php with the one I have attached below.

That should 100% fix it.

BugginIn

Holy Crap...

You are a serious badass... I spent 4 days reading through threads here on responsive and CSS and you fixed those two things in 4 mins?

Russian Hackers and got no skills compared to you... Wow...


Thanks a million; super appreciate the support....


BugginIn

TwitchisMental

Quote from: BugginIn on February 26, 2023, 04:59:17 PMHoly Crap...

You are a serious badass... I spent 4 days reading through threads here on responsive and CSS and you fixed those two things in 4 mins?

Russian Hackers and got no skills compared to you... Wow...


Thanks a million; super appreciate the support....


BugginIn

You're welcome, I am always happy to help.

Truthfully I am just good with SMF theming, there are others here who are a-lot more talented than I XD .

Marking this as solved.

Advertisement: