XF 2.2 I figured out how to remove single line breaks on mobile but leave them on desktop

[MapleOne]

Code #1

/* Remove Line Breaks on Mobile */
@media (max-width: @xf-responsiveMedium)
{div.remove_br_mobile {display: none !important;}}

I am really picky on my mobile view and with the placement of ads I sometimes get an extra line break I don't see on desktop.

So I wrap the br in a div and name it remove_br_mobile

With the css code above I can remove all the designated line breaks I want with one piece of css assuming the line break is wrapped in the div.



However..... there is always a however...


I have not figured out how to add this to the code below to the above to make it work

Code #2

[data-template="forum_list"]

So ideally I want to combine both bits of code but I've tried every combination with no success


Any ideas?

 

[Paul B]

[data-template="forum_list"]
{
    @media (max-width: @xf-responsiveMedium)
    {div.remove_br_mobile {display: none !important;}}
}

 

[MapleOne]

[data-template="forum_list"]
{
    @media (max-width: @xf-responsiveMedium)
    {div.remove_br_mobile {display: none !important;}}
}

That worked like a charm

I had the data-template over or under @ media, but inside the first bracket.

Easy once you know, and I had never done an @ media that included a data-template.


I learned how to do custom google scripts that load the same sized ads (forced) and collapse the element if nothing displays. It was a heck of a job on mobile to make it look like it belongs as part of the forum but for some reason line breaks appear a bit different on mobile screens always leaving a tad of empty space. My mobile view is insanely perfect now regardless of if someone is using an ad blocker or not.

Anyone wants to check it out dn(dot)ca

Look at it on desktop and mobile with and without an adblocker, it displays perfect.

PS. Some of the box ads are local and will circumvent ad blockers, that is by design.