Mobile and regular themes. ¿Custom CSS affecting just regular o just mobile?

unbosquedeteverde · Member · Sep 13, 2014 at 10:14 am
Copy link

Add topic to favorites
Hello,

I have a long custom css for regular site but i don´t want that custom css to affect mobile theme so i disable using custom css in mobile-theme.

The problem is i would want to add just one css modification to mobile theme (related to “quotes” that are shown pretty similar -only difference been “italic”- to normal entry text -and that confuse readers from smartphones that think its an error of some paragrafs been shown twice- .

If i enable the css custom in mobile, then, all css modification affect mobile and i do not want that.

I know I can add – .mobile-theme – before any css selector to just be applied to the mobile theme but how can I avoid that the rest of custom css affect too the mobile theme?

thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 13, 2014 at 4:41 pm
Copy link
Hi there, to make a change on the dedicated mobile theme you can precede the CSS selector with the mobile specific body class, which is .mobile-theme. To style the blockquotes on mobile similar to what it is on the full theme, add the following to the end of your custom CSS.
```
.mobile-theme blockquote {
	margin-bottom: 10px;
	border-left: 4px solid #CCC;
	background: #f1f1f1;
	padding: 10px 20px 3px 20px;
}
```
I’ve adjusted things so that I think it will look fine on a mobile and read as a blockquote, but will not take up too much room on the small screen. See what you think.
unbosquedeteverde · Member · Sep 13, 2014 at 5:10 pm
Copy link
@thesacredpath, your css lines to apply to mobile theme in order to make “blockquotes” different to regular text is great. Thanks a lot. The problem is that, in order to make this css code active to mobile theme i need to activate the tick “use css customizacion in mobile theme”, and if i do that, then, not only this lines of css under .mobile-theme code affect mobile theme. Every bit of my css customization page affect the mobile theme. And i don´t want that. I just want that lines related to blockquotes style, the ones with .mobile-theme, to take effect over the mobile theme…
thesacredpath · Member · Sep 13, 2014 at 5:41 pm
Copy link
Hmmm, I should have thought of that. I should be awake by now, it is after 12pm where I am. ;P

I looked at the body selectors on the full theme thinking there might be something I could use to limit your existing CSS to the full theme only. This is sort of a long shot, but let’s try an experiment. Pick a couple of easily seen changes to your main site and temporarily precede the selectors with this:
.highlander-enabled
and then add in the CSS I gave above and set it so that the CSS is applied to the mobile and save and take a look at your site on your mobile.

That body selector does not appear in the mobile body tag.

See if that keeps the sample full CSS you choose from showing up on the mobile.
unbosquedeteverde · Member · Sep 13, 2014 at 6:05 pm
Copy link
;)

ok, i did it. In some cases it works (after adding .highlander-enabled the line keeps working on regular theme but is OFF in mobile) -good work!- but for example in this lines (those that change the overall size of main text in posts, etc) don´t:

.wf-active .entry-content p, .wf-active .entry-content {
font-size: 15px;
}

One more note: my css custom page is pretty long. Thinking about adding a preselector to every selectors (there are tons) make me afraid! ;) if there is no other option, then, i will consider but, just to allow one important but small change in the mobile blockquotes, changing everything in css custom page sounds terrific ;)

anyway, thanks a lot for your help @thesacredpath. I hope you will find the clue.
thesacredpath · Member · Sep 13, 2014 at 7:21 pm
Copy link
Yeah, I’m afraid that adding proceeding the selectors with the one I mentioned would be the only thing I can think of. On the one you reference, you would need to precede both selectors in that rule with the one I gave, such as this:
.highlander-enabled .wf-active .entry-content p, .highlander-enabled .wf-active .entry-content

It most definitely would be a lot of work. Sorry I don’t have a solid, easy solution for this.
unbosquedeteverde · Member · Sep 13, 2014 at 7:44 pm
Copy link
I know. At least you gave me one option, a good one, that works. I´ll see… thank you very much @thesacredpath.
thesacredpath · Member · Sep 13, 2014 at 7:47 pm
Copy link
You are welcome and you know where we are if you have any other questions or problems. I like what you’ve done with your site, by the way, the rotate and box shadow on hover on the feature images and such. Nice job!
unbosquedeteverde · Member · Sep 13, 2014 at 7:53 pm
Copy link
Big thanks!

No items found.