I have an interesting dilemma…
I’m creating a bespoke theme with responsive breakpoints. Some of the image containers resize at different breakpoints, and the images inside need different offsets to show the correct regions.
You can see an example here, simply resize the viewport and you’ll see the ‘are you tough enough’ container resize and recenter the image.
What I would *like* to do, is to allow the client to input the positive/negative offset for the different breakpoints in the ACF field groups and then get those values into the CSS somehow.
The question is, how would I get ACF field values into my CSS files. It would have to be inside the CSS files (I think) because it would need to inside of the @media sections.
I see two ways of doing this:
1. Rather than using PHP to write directly to CSS files (which could cause cache issues), you could generate separate <style> tags for the media rules and insert these in the <head>. For example:
<style media="screen and (max-width: 800px)">
// CSS
</style>
2. You could create a PHP script to dynamically create a concatenated CSS file. Chris Coyer’s site WP-Mix has a good code snippet to get you started: http://wp-mix.com/combine-compress-css-files-php/
