More Odd behavior when it comes to responsive mode

[deansmar]

hi Chen,
SMF 2.1.7
EhPortal_v1.40.4-RC4
verious themes from TheCripZone, plus the default curve theme

i test the Mobile versions on what the browsers have to offer, under enwicklertools.. wether Crome / Firefox or Edge
mainly i use Firefox and Edge on:
iphone 14 and 17
samsung galaxy A51, A71, S25
google pixel 7, 8, 9
ipad mini and pro
samsung tab S4, S9

you can see it all here on my test website

i am haveing a few Problems when viewing a themes in the responsive mode (eg. mobile phone)
no matter what theme apart from Whitebox, (i managed to get that one working) apart from the width(see below)..

the login button is across the hole of the screen.. turning the float off resoves this problem..
but i can not find anywere in the CSS that can change the float variable.. nothing seems to work in either the themes responsive.css or the ep_responsive.min.css or the portal_responsive.min.css

it seems to be hard programmed into inline..

there also seems to be a poblem with the width of the whole website/forum/portal..!
there is a padding or margin on the left side, but nothing on the right side, it even looks like it overflows..

i have tryed tinyportal, and everything works fine with that portal, but i would prfer to use your portal..

i hope you can help.. kind regards

[Chen Zhen]

I'm working on these issues.
You can try RC5 which may work a bit better across all those themes you're testing.
However, I have found that the footer copyrights are not centered properly nor is the text color for some themes.
Font color is not adjusted directly from EhPortal's native code but somehow it is affecting it in some scenarios.
 

[deansmar]

thanks for the feedback Chen..

i will give it a try..

[deansmar]

some things have changed.. not to sure if thats good or not...  

the float left problem remains.. but disapers when loged in..!
if the float left is disabled.. then things are okay..

[deansmar]

the version seems to be having its problems to...

not to sure if you would like to implement these changes..

i have made some changes to the calendar in the portalblocks.php
on line 1763 and 1766 so that the relevant dates stand out a bit more..
i have changed the Strong, in the portal.css

sp_strong{
    font-weight: bold;
    color: hsl(208, 65%, 38%);
    background: hsl(149, 39%, 65%);
    padding: 1px 3px 1px 3px;
}

Code Select Expand

if (!empty($day['holidays']) || !empty($day['birthdays']) || !empty($day['events']))
echo '
<a href="#day" onclick="return sp_collapseCalendar(\'', $day['day'], '\');"><sp_strong>', $day['is_today'] ? '[' : '', $day['day'], $day['is_today'] ? ']' : '', '</sp_strong></a>';
else
echo '
<a href="#day" onclick="return sp_collapseCalendar(\'0\');">', $day['is_today'] ?  '<strong>[' : '', $day['day'], $day['is_today'] ? ']</strong>' : '', '</a>';


also in the portal.css so that the news round tabs are smaller and inside the news window..

Code Select Expand

/* **************************************/
/* News specific styles    */
/* **************************************/
a.sp-inactive
{
background-color: #CCC;
background-size: 2em auto;
border-radius: 50%;
text-decoration: none;
cursor: pointer;
border: 0;
opacity: 1;
height: 10px;
width: 10px;
display: inline-block;
position: absolute;
top: 65%;
}
a.sp-active
{
background-color: #557EA0;
background-size: 2em auto;
border-radius: 50%;
text-decoration: none;
cursor: pointer;
border: 0;
opacity: 1;
height: 10px;
width: 10px;
display: inline-block;
position: absolute;
top: 65%;
}


[Chen Zhen]

RC6 is available which includes some responsive CSS adjustments.

The text color for some themes based off of curve2 has been fixed as well as the centering of the copyrights.
I also zeroed out the margin for the #main_content_section which was causing a display issue.

As for the other changes you posted, please keep in mind that using specific text/background colors is not going to look proper across all custom themes. I do not disagree with attempting the make highlights stand out more but in my opinion it will be best to apply a method which will look proper on most theme variations.
Perhaps some shadowing along with the CSS "currentColor" attribute? 

[deansmar]

thanks for the feed back..
the rc6 version looks much better on the default theme.. diffinatly a big improvment..
i do not see any errors with the floating problem.. its disapeard..
the over all display issue is much better..

i see what you mean with the Shadowing.. yes, and i agree, it would be better to use the themes attributes

i will have to look into that, or will you be doing a configuration for the block settings..?

again thanks

[deansmar]

yes.. the Shadowing in the themes looks much better..  thanks for the pointer..