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%;
}