smaller screen – front page looks different

annascherman · Member · Oct 12, 2015 at 3:10 am
Copy link

Add topic to favorites
Hi,

I had help previously with the custom CSS of my front page to create a specific look…the only issue is, suddenly, I have messed up what happens on smaller screens. On my phone, for example, the grid becomes very spaced out and the images seem to float in space by themselves. Any idea what I fooled with to cause this issue?

The blog I need help with is: (visible only to logged in users)
dewlancehosting · Member · Oct 12, 2015 at 5:20 am
Copy link
Did you try to use image width = 100% instead of fixed size?

Change width and height of image to 100% and it will automatically.

You can use 100% to grid,etc.
justjennifer · Member · Oct 12, 2015 at 6:00 am
Copy link
hi again @annascherman

When you are in your site’s WP Admin>Appearance>Customizer, under the CSS tab do you see an option for CSS Revisions? https://en.support.wordpress.com/custom-design/editing-css/

WordPress.com saves your last 25 CSS revisions. You should be able to roll back from there.

Let us know how that goes and if you need any further help.
annascherman · Member · Oct 12, 2015 at 2:00 pm
Copy link
Hi justjennifer,

This is actually something that must have been changed before my last 25 CSS revisions and I just didn’t catch it…I’ve made a lot of changes in the last few weeks!

dewlancehosting, where in my code are you suggesting I set the image width to 100%? I had help getting to the current structure and there are a lot of different revisions…see below. All of this is currently creating the grid as I wish it to be.
```
#page {
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
	position: relative;
}

.site-header {
	max-width: 28%;
	position: relative;
	width: 220px;
	padding-right: 0;
	margin-left: -105px;
}

.site-content {
	float: right;
	margin-left: 0;
	margin-right: -70px;
	max-width: 80%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.hentry.page {
	max-width: 90%;
}
```
ehtis · Staff · Oct 13, 2015 at 3:29 am
Copy link
@annascherman,

I see the following code in one of the custom CSS files, but apparently it doesn’t show up in your CSS Customizer?

Try pasting this at the end:
```
.my-ul {
    margin:0px;
}
.my-ul img {
    margin-bottom:8px;
    padding-right:8px;
    width:100% !important;
}
```
annascherman · Member · Oct 13, 2015 at 3:35 am
Copy link
Yep, it is already in there.

Any other ideas out there?
ehtis · Staff · Oct 13, 2015 at 3:57 am
Copy link
Have you selected the “Enable mobile theme” option under WP Admin > Appearance > Mobile? (Diret link.)

If so, we’re gonna have to target that separate mobile theme via its own CSS selector:
```
.mobile-theme .my-ul {
    margin: 2px;
}
.mobile-theme .my-ul img {
    margin-bottom: 8px;
    padding-right: 8px;
}
```
How does it look now?
annascherman · Member · Oct 13, 2015 at 4:07 am
Copy link
Nope, unfortunately it looks the same…

Also, I noticed none of the other CSS I have set up is working on my phone? For example, I have something set up to override the black standard background of the slide show on my other pages, but its not showing on my phone?
ehtis · Staff · Oct 13, 2015 at 6:57 pm
Copy link
Do you have the “Enable mobile theme” set under WP-Admin > Appearance > Mobile?

If yes, that CSS will have to be preceded by .mobile-theme class, if not, is it wrapped under @media query, with a max width of around 600-700px?

I’m afraid there could be a syntax error in the code as well, I believe a staff member will have to take a look so I’m tagging this thread for their attention.
annascherman · Member · Oct 13, 2015 at 7:01 pm
Copy link
I do have “Enable mobile theme” set…

when you say, “that CSS,” do you mean all of the CSS that I have already? There is quite a bit…

Thanks, I think a staff memner would be great! How do you tag a thread for their attention?
ehtis · Staff · Oct 13, 2015 at 7:13 pm
Copy link
Not all of the CSS, only mobile-specific. Blask is a responsive theme, so you don’t really need to enable that option. It’s for themes that don’t have a responsive design, i.e., the ones which don’t automatically resize according to device screen size.

For tagging, look at the top right section of this thread; adding modlook there will bring it to their attention as they go through the queues. I’ve already added it.

See if disabling “mobile theme” solves the grid spacing issue, it should.
annascherman · Member · Oct 13, 2015 at 7:22 pm
Copy link
same issue when it is disabled

No items found.