CSS help for Fusion theme, mobile layout

jaclynpieleski · Member · Jul 2, 2013 at 2:07 pm
Copy link

Add topic to favorites
Hi,

I was told that there is a separate CSS style sheet for the mobile layout, and I was wondering if I could get some help tweaking it a little. My blog has two main problems on the smart phone: the images do not appear next to each other on the home page, and the menu items are spaced out too much. Is it possible to fix these two things through custom CSS? Any help would be greatly appreciated!

Thank you!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jul 2, 2013 at 3:23 pm
Copy link
It looks to me like what has happened is you have added custom CSS and checked the “Include this CSS in the Mobile Theme” option in your Appearance → Themes → Customize → CSS panel, but you didn’t really want to reply your custom CSS to the mobile theme. Can you try unchecking that option and then viewing your site on mobile again?

Doing that will make the mobile theme go back to normal, however, because of how you’ve set up images on your front page comment it won’t have enough space and so they’ll wrap and show one image on each line.

Another option would be to turn off the mobile theme altogether. That way, your custom CSS settings will still apply and the Fusion theme will show through on mobile.

Here is some more information about the mobile theme in case you’re interested:
http://en.support.wordpress.com/themes/mobile-themes/
jaclynpieleski · Member · Jul 2, 2013 at 4:26 pm
Copy link
Hmm…I do still want the custom CSS to apply to the mobile theme though…I just wanted to fix some of the spacing issues that were appearing on the smaller screen. So it sounds like there is nothing I can do to about the images…? I found on the support page that you sent me the body class for the mobile theme…could I use that to make the images smaller through CSS so that they can fit better (maybe even just two to a row instead of one)?
designsimply · Member · Jul 3, 2013 at 9:48 pm
Copy link
So it sounds like there is nothing I can do to about the images…?

You can make adjustments to just the mobile theme if you’d like. To do that, prefix your CSS with “.mobile-theme” well the mobile theme has been turned back on.

Here is an example to get you started:
```
.mobile-theme.home #attachment_708,
.mobile-theme.home #attachment_613,
.mobile-theme.home #attachment_713,
.mobile-theme.home #attachment_614,
.mobile-theme.home #attachment_710,
.mobile-theme.home #attachment_616 {
	width: 30% !important;
}
```
What this example does is first targets the body for the home page by putting “.home” after “.mobile-theme” in the selector. Notice there is no space between those, that’s because they both applied to the same tag. After that, I looked at the page source for your homepage and found out the specific attachment ID values for each image in the content area of your homepage. I used those with a “#” in front for the second part of each selector. There are six selectors that all have the same role, so that’s why they are in a comma separated list.

Try the example in your Appearance → Themes → Customize → CSS panel, and then try adjusting the 30% value if you want to change the size of the images.

No items found.