Customizer css not working?

perfectplots · Member · Oct 26, 2016 at 8:42 am
Copy link

Add topic to favorites
I have recently used some custom CSS that I need for my layout. The css has been used from a post http://codepen.io/team/css-tricks/pen/jqzNZq.
Originally I saw in the customizer the css working fine but now it is completely different than i need. I need the text on the right on a desktop and on smaller deveices the text to order first then the images underneath.

The customizer css lines are 48 -93 and the code is as follows:
```
/* -- flexbox --*/
.wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

.wrapper > * {
	padding: 10px;
	flex: 1 100%;
}

.main {
	text-align: left;
	background: deepskyblue;
	padding: 20px;
	border: 1px solid #000;
}

.aside-1 {
	background: gold;
}

@media only screen and (min-width: 600px) {
	.aside {
		flex: 1 auto;
	}
}

@media only screen and (min-width: 800px) {
	.main {
		flex: 1 0;
	}

	.aside-1 {
		order: 1;
	}

	.main {
		order: 2;
	}
}
```
the page that this is used on is : https://perfectplots.wordpress.com/portfolio/test-dev/

Also the site is in PRIVATE mode. If it is not possible to see the effects please let me know and I can rectify the view of the site to communicate the info, Thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 28, 2016 at 5:53 am
Copy link
Hi there, I looked at your test-dev page, and on smaller screens (narrowing my browser) I see your image placeholders below the blue section. Did you get this resolved, or am I missing something?
perfectplots · Member · Oct 28, 2016 at 7:05 am
Copy link
hi there thescredpath. I think you missed something. the effect I had looks a little like this but for some reason it is not https://perfectplots.files.wordpress.com/2016/10/perfectcasestudy-lao-v3.jpg

The particular code is from the link here: http://codepen.io/team/css-tricks/pen/jqzNZq.
perfectplots · Member · Oct 28, 2016 at 7:25 am
Copy link
sorry the link has a full stop please take it off the link when loading
thesacredpath · Member · Oct 28, 2016 at 6:02 pm
Copy link
Ah, thanks for the screenshot, now I understand. I’ve got things to look like what you want, I think, by modifying your 800px media query like this.
```
@media only screen and (min-width: 800px) {
.main {
    flex: 0 1 auto;
}
.aside-1 {
    order: 1;
    width: 50%;
}
.main {
    order: 2;
    width: 50%;
}
}
```
One other suggestion is to change your “main” class name to something like “my-main”. Main is a common class in WordPress themes, and although there doesn’t appear to be that class in this theme, just to be on the safe side I’d suggest changing it.
perfectplots · Member · Oct 28, 2016 at 9:03 pm
Copy link
na man check the link – http://codepen.io/team/css-tricks/pen/jqzNZq

The link is crucial to the development being fixed. reference that man… please – thanks
thesacredpath · Member · Oct 31, 2016 at 10:48 pm
Copy link
Hi there, once in a while the Customizer preview will not match what shows up directly on the site with some CSS customizations. Luckily this is rare and our developers are continually working on getting the preview as accurate as possible.

I need the text on the right on a desktop and on smaller deveices the text to order first then the images underneath.

It looks like you have made progress on things and I’m seeing what you describe on your test-dev page. The only difference I see is that your images are in a table-like layout below the text block rather than full width. Have you gotten this to where it works for you?
perfectplots · Member · Nov 1, 2016 at 7:40 am
Copy link
Ive utilised the power of the framework rather than complicating the situation more. the set up looks to be working fine now. thank you for the generous help ni getting it fixed. I hope its fine now.
thesacredpath · Member · Nov 1, 2016 at 6:31 pm
Copy link
Super and you are welcome. Yes it looks good to me in Safari, Chrome and Firefox on my Mac. Let us know if you have additional questions or problems.

No items found.