Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: BugginIn on February 26, 2023, 12:04:05 PM

Title: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 12:04:05 PM
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;
    }



(https://tristatesurvival.com/Screenshot12.jpg)

(https://tristatesurvival.com/Screenshot13.jpg)
 

Thank you,

BugginIn
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: TwitchisMental on February 26, 2023, 01:24:49 PM
Do you have any mods installed?

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

What is your resolution when this happens?
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 02:48:04 PM
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
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: TwitchisMental on February 26, 2023, 03:00:13 PM
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.
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 03:22:26 PM
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...

(https://tristatesurvival.com/Screenshot14.jpg)

(https://tristatesurvival.com/Screenshot15.jpg)

Attached the modieifed CSS file too...


Thank you,

BugginIn

Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 03:24:02 PM
With file now...
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: TwitchisMental on February 26, 2023, 03:41:20 PM
I think I see what you are trying to do.

Try using the responsive.css I have attached below.
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 03:42:48 PM
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
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: 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 :).
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 03:48:19 PM
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?

Title: Re: Responsive - Hiding/showing elements with CSS
Post by: 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....
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: 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?
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 03:55:02 PM
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...
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: TwitchisMental on February 26, 2023, 03:59:17 PM
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;
}
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: TwitchisMental on February 26, 2023, 04:29:26 PM
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.
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: BugginIn on February 26, 2023, 04:59:17 PM
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
Title: Re: Responsive - Hiding/showing elements with CSS
Post by: TwitchisMental on February 26, 2023, 05:10:46 PM
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.