The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

css code for mobile , changes classic version

View previous topic View next topic Go down

In progress css code for mobile , changes classic version

Post by mcdk on November 2nd 2015, 8:16 pm

hello there!
I found some css code for mobile.
And after searching in the source code ,
I found that this specific code changes my desktop version also :
Code:
.post {
    padding: 0!important;
    line-height: 170%!important;
    margin: 0px;
    font-size: 12px!important;
    background: transparent!important;
}
.postbody .content {
    position: relative;
    padding: 15px!important;
    word-break: break-all;
    -moz-hyphens: auto;
    font-size: 12px!important;
    color: #555!important;
    line-height: 170%!important;
  background: #FFF!important;
}

You can see my forum before and after below :




Can you help me?

thanks




mcdk
Forumember

Male Posts : 135
Reputation : 1
Language : Greek

Back to top Go down

In progress Re: css code for mobile , changes classic version

Post by Ange Tuteur on November 2nd 2015, 8:20 pm

Hi @mcdk,

For certain CSS rules that affect the desktop version also, I recommend adding the id #mpage-body before the selector set. For example :
Code:
#mpage-body .post {
    padding: 0!important;
    line-height: 170%!important;
    margin: 0px;
    font-size: 12px!important;
    background: transparent!important;
}
#mpage-body .postbody .content {
    position: relative;
    padding: 15px!important;
    word-break: break-all;
    -moz-hyphens: auto;
    font-size: 12px!important;
    color: #555!important;
    line-height: 170%!important;
  background: #FFF!important;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: css code for mobile , changes classic version

Post by mcdk on November 2nd 2015, 9:12 pm

Thank you so much!
I have one more question and I think the appearance of the mobile theme will be just perfect.
I have this css code for the quotes into the desktop forum.
And I get a mixed result in the mobile template.
Check it in the photo.
Here is the css code for the desktop.
Code:

.content blockquote, dl.codebox {
background: none;
border: 0!important;
position: relative;
overflow: hidden;
min-height: 35px!important;
margin: 10px 0;
padding: 11px 0 6px 10px;
font-size: 14px;
line-height: 18px;
color: #504536;
font-family: Georgia;
font-style: italic;
}
blockquote div {
margin-top: 7px;
margin-left: 6px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: solid 1px #D5DEE5;
background: url(http://i58.servimg.com/u/f58/14/80/95/87/spback10.png) bottom left repeat-x #FFF;
max-width: 91%;
padding: 15px 20px 10px 23px;
position: relative;
}
blockquote div:before {
content: '';
background: url(http://i58.servimg.com/u/f58/14/80/95/87/openq10.png) top left no-repeat transparent;
position: absolute;
width: 16px;
height: 16px;
top: 15px;
left: 3px;
}
blockquote cite {
font-style: normal;
font-weight: 700;
display: block;
font-size: 13px;
color: #fff;
background: url(http://i58.servimg.com/u/f58/14/80/95/87/qhm10.png) top left repeat-x transparent;
height: 32px;
position: absolute;
z-index: 100;
top: -15px;
text-shadow: #000 1px 1px;
left: 0;
}
blockquote cite:before {
content: '';
position: absolute;
z-index: -1;
background: url(http://i58.servimg.com/u/f58/14/80/95/87/qho10.png) no-repeat 0 0 transparent;
width: 31px;
height: 38px!important;
left: -13px;
top: 0;
}
blockquote cite:after {
content: '';
background: url(http://i58.servimg.com/u/f58/14/80/95/87/qhc10.png) no-repeat 0 0 transparent;
position: absolute;
right: -10px;
width: 10px;
height: 32px;
top: 0;
}




Thanks again!

mcdk
Forumember

Male Posts : 135
Reputation : 1
Language : Greek

Back to top Go down

In progress Re: css code for mobile , changes classic version

Post by SLGray on November 3rd 2015, 4:04 am

@Ange Tuteur wrote:For certain CSS rules that affect the desktop version also, I recommend adding the id #mpage-body before the selector set.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35606
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: css code for mobile , changes classic version

Post by Ange Tuteur on November 3rd 2015, 11:04 am

Yes ^^

You'll need to write overrides for the mobile version. For example, hide the cite pseudo-content :
Code:
#mpage-body blockquote cite:before, #mpage-body blockquote cite:after {
  display:none;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum