I'm currently working on customizing a Tumblr theme. Users have the option to choose between a one-column or two-column layout style, and I'm facing some challenges with implementing this in the CSS code. I attempted to add a class based on the user's selection to the content, but it doesn't seem to be functioning properly. I am unsure if having a class inside another class is the correct approach.
In essence, my objective is for the Content div class to determine the Container div class.
<meta name="select:Layout" content="ClassOne" title="One Column">
<meta name="select:Layout" content="ClassTwo" title="Two Columns">
CSS code snippets:
.ClassOne{
@media (max-width:480px){
.container{
width: 250px;
float: left;
}
}
@media (min-width: 480px){
.container{
width: 300px;
float: left;
}
}
}
.ClassTwo{
@media (max-width:480px){
.container{
width: 500px;
float: left;
}
}
@media (min-width: 480px){
.container, .container .photo img, .photoset img, .link, .quote, .text, .chat, .audio, .video, .video iframe, .answer{
width: 600px;
float: left;
}
}
}
HTML structure:
<div id="content" class="masthead {select:Layout}">
<div class="container">
</div>
</div>