css code for mobile , changes classic version
3 posters
Page 1 of 1
css code for mobile , changes classic version
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 :
You can see my forum before and after below :
Can you help me?
thanks
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
- Posts : 135
Reputation : 1
Language : Greek
Re: css code for mobile , changes classic version
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 :
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;
}
Re: css code for mobile , changes classic version
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.
Thanks again!
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
- Posts : 135
Reputation : 1
Language : Greek
Re: css code for mobile , changes classic version
Ange Tuteur wrote:For certain CSS rules that affect the desktop version also, I recommend adding the id #mpage-body before the selector set.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: css code for mobile , changes classic version
Yes ^^
You'll need to write overrides for the mobile version. For example, hide the cite pseudo-content :
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;
}
Similar topics
» classic to mobile? and classic not completely loading pages.
» Can't Create New PM in Mobile Classic Version
» Classic view of Mobile Version
» Removing Classic Version from mobile menu
» Removing Classic Version from mobile menu
» Can't Create New PM in Mobile Classic Version
» Classic view of Mobile Version
» Removing Classic Version from mobile menu
» Removing Classic Version from mobile menu
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum