I'm trying to auto-minify the CSS file after it was compiled from SCSS in Shopify, but I don't know how to do that.
I've tried to minify the SCSS which I know is not a very clever thing to do because SCSS cannot be shown in the browser and it gets auto-compiled by Shopify, but I can't figure out a way to minify it.
This is an example of what my theme.scss.css looks like after it gets compiled:
.grid--small {
margin-left: -10px; }
.grid--small .grid__item {
padding-left: 10px; }
.grid__item {
float: left;
padding-left: 22px;
width: 100%;
min-height: 1px; }
#media only screen and (max-width: 768px) {
.grid__item {
padding-left: 17px; } }
.grid__item[class*="--push"] {
position: relative; }
.grid--no-gutters {
margin-left: 0; }
.grid--no-gutters .grid__item {
padding-left: 0; }
And this is before it is compiled:
.grid--small {
margin-left: -10px;
.grid__item {
padding-left: 10px;
}
}
.grid__item {
float: left;
padding-left: $grid-gutter;
width: 100%;
min-height: 1px;
#include media-query($small) {
padding-left: $grid-gutter-small;
}
&[class*="--push"] {
position: relative;
}
}
.grid--no-gutters {
margin-left: 0;
.grid__item {
padding-left: 0;
}
}
I would appreciate any advice on this case.
P.S. The SCSS file has also parts of liquid in it, so the original file has both .scss and .liquid file extensions.
Helping a client update their Shopify theme. The previous designer used an unconventional method for the base grid. I need help translating the code.
Read an old article about this subject, but I still did not understand.
$phone: "screen and (max-width: 640px)";
$tablet: "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up: "screen and (min-width: 641px)";
$pocket: "screen and (max-width: 1007px)";
$lap: "screen and (min-width: 1008px) and (max-width: 1239px)";
$lap-and-up: "screen and (min-width: 1008px)";
$desk: "screen and (min-width: 1240px)";
$widescreen: "screen and (min-width: 1500px)";
.\31\/2, .\32\/4, .\36\/12 {
width: 50%;
}
.\31\/3, .\34\/12 {
width: 33.33333%;
}
.\32\/3, .\38\/12 {
width: 66.66667%;
}
.\31\/4, .\33\/12 {
width: 25%;
}
.\33\/4, .\39\/12 {
width: 75%;
}
.\31\/12 {
width: 8.33333%;
}
.\32\/12 {
width: 16.66667%;
}
.\35\/12 {
width: 41.66667%;
}
.\37\/12 {
width: 58.33333%;
}
.\31\30\/12 {
width: 83.33333%;
}
.\31\31\/12 {
width: 91.66667%;
}
#media #{$phone} {
.hidden-phone {
display: none !important;
}
.\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
width: 50%;
}
.\31\/3--phone, .\34\/12--phone {
width: 33.33333%;
}
.\32\/3--phone, .\38\/12--phone {
width: 66.66667%;
}
.\31\/4--phone, .\33\/12--phone {
width: 25%;
}
.\33\/4--phone, .\39\/12--phone {
width: 75%;
}
.\31\/12--phone {
width: 8.33333%;
}
.\32\/12--phone {
width: 16.66667%;
}
.\35\/12--phone {
width: 41.66667%;
}
.\37\/12--phone {
width: 58.33333%;
}
.\31\30\/12--phone {
width: 83.33333%;
}
.\31\31\/12--phone {
width: 91.66667%;
}
}
#media #{$tablet} {
.hidden-tablet {
display: none !important;
}
.\31\/2--tablet, .\32\/4--tablet, .\36\/12--tablet {
width: 50%;
}
.\31\/3--tablet, .\34\/12--tablet {
width: 33.33333%;
}
.\32\/3--tablet, .\38\/12--tablet {
width: 66.66667%;
}
.\31\/4--tablet, .\33\/12--tablet {
width: 25%;
}
.\33\/4--tablet, .\39\/12--tablet {
width: 75%;
}
.\31\/12--tablet {
width: 8.33333%;
}
.\32\/12--tablet {
width: 16.66667%;
}
.\35\/12--tablet {
width: 41.66667%;
}
.\37\/12--tablet {
width: 58.33333%;
}
.\31\30\/12--tablet {
width: 83.33333%;
}
.\31\31\/12--tablet {
width: 91.66667%;
}
}
#media #{$tablet-and-up} {
.hidden-tablet-and-up {
display: none !important;
}
.\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
width: 50%;
}
.\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
width: 33.33333%;
}
.\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
width: 66.66667%;
}
.\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
width: 25%;
}
.\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
width: 75%;
}
.\31\/12--tablet-and-up {
width: 8.33333%;
}
.\32\/12--tablet-and-up {
width: 16.66667%;
}
.\35\/12--tablet-and-up {
width: 41.66667%;
}
.\37\/12--tablet-and-up {
width: 58.33333%;
}
.\31\30\/12--tablet-and-up {
width: 83.33333%;
}
.\31\31\/12--tablet-and-up {
width: 91.66667%;
}
}
#media #{$pocket} {
.hidden-pocket {
display: none !important;
}
.\31\/2--pocket, .\32\/4--pocket, .\36\/12--pocket {
width: 50%;
}
.\31\/3--pocket, .\34\/12--pocket {
width: 33.33333%;
}
.\32\/3--pocket, .\38\/12--pocket {
width: 66.66667%;
}
.\31\/4--pocket, .\33\/12--pocket {
width: 25%;
}
.\33\/4--pocket, .\39\/12--pocket {
width: 75%;
}
.\31\/12--pocket {
width: 8.33333%;
}
.\32\/12--pocket {
width: 16.66667%;
}
.\35\/12--pocket {
width: 41.66667%;
}
.\37\/12--pocket {
width: 58.33333%;
}
.\31\30\/12--pocket {
width: 83.33333%;
}
.\31\31\/12--pocket {
width: 91.66667%;
}
}
#media #{$lap} {
.hidden-lap {
display: none !important;
}
.\31\/2--lap, .\32\/4--lap, .\36\/12--lap {
width: 50%;
}
.\31\/3--lap, .\34\/12--lap {
width: 33.33333%;
}
.\32\/3--lap, .\38\/12--lap {
width: 66.66667%;
}
.\31\/4--lap, .\33\/12--lap {
width: 25%;
}
.\33\/4--lap, .\39\/12--lap {
width: 75%;
}
.\31\/12--lap {
width: 8.33333%;
}
.\32\/12--lap {
width: 16.66667%;
}
.\35\/12--lap {
width: 41.66667%;
}
.\37\/12--lap {
width: 58.33333%;
}
.\31\30\/12--lap {
width: 83.33333%;
}
.\31\31\/12--lap {
width: 91.66667%;
}
}
#media #{$lap-and-up} {
.hidden-lap-and-up {
display: none !important;
}
.\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
width: 50%;
}
.\31\/3--lap-and-up, .\34\/12--lap-and-up {
width: 33.33333%;
}
.\32\/3--lap-and-up, .\38\/12--lap-and-up {
width: 66.66667%;
}
.\31\/4--lap-and-up, .\33\/12--lap-and-up {
width: 25%;
}
.\33\/4--lap-and-up, .\39\/12--lap-and-up {
width: 75%;
}
.\31\/12--lap-and-up {
width: 8.33333%;
}
.\32\/12--lap-and-up {
width: 16.66667%;
}
.\35\/12--lap-and-up {
width: 41.66667%;
}
.\37\/12--lap-and-up {
width: 58.33333%;
}
.\31\30\/12--lap-and-up {
width: 83.33333%;
}
.\31\31\/12--lap-and-up {
width: 91.66667%;
}
}
#media #{$desk} {
.hidden-desk {
display: none !important;
}
.\31\/2--desk, .\32\/4--desk, .\36\/12--desk {
width: 50%;
}
.\31\/3--desk, .\34\/12--desk {
width: 33.33333%;
}
.\32\/3--desk, .\38\/12--desk {
width: 66.66667%;
}
.\31\/4--desk, .\33\/12--desk {
width: 25%;
}
.\33\/4--desk, .\39\/12--desk {
width: 75%;
}
.\31\/12--desk {
width: 8.33333%;
}
.\32\/12--desk {
width: 16.66667%;
}
.\35\/12--desk {
width: 41.66667%;
}
.\37\/12--desk {
width: 58.33333%;
}
.\31\30\/12--desk {
width: 83.33333%;
}
.\31\31\/12--desk {
width: 91.66667%;
}
}
/* Create each media query */
#media #{$widescreen} {
.hidden-widescreen {
display: none !important;
}
.\31\/2--widescreen, .\32\/4--widescreen, .\36\/12--widescreen {
width: 50%;
}
.\31\/3--widescreen, .\34\/12--widescreen {
width: 33.33333%;
}
.\32\/3--widescreen, .\38\/12--widescreen {
width: 66.66667%;
}
.\31\/4--widescreen, .\33\/12--widescreen {
width: 25%;
}
.\33\/4--widescreen, .\39\/12--widescreen {
width: 75%;
}
.\31\/12--widescreen {
width: 8.33333%;
}
.\32\/12--widescreen {
width: 16.66667%;
}
.\35\/12--widescreen {
width: 41.66667%;
}
.\37\/12--widescreen {
width: 58.33333%;
}
.\31\30\/12--widescreen {
width: 83.33333%;
}
.\31\31\/12--widescreen {
width: 91.66667%;
}
}
Hoping to understand the patterns for "\31" "\32" "\36" "\37", and hopefully a translation the first 12-grid declarations.
CSS identifiers, such as classes and IDs, cannot begin with a digit (0 - 9).
From the spec:
4.1.3 Characters and
case
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z, A-Z, 0-9] and ISO
10646 characters U+0080 and higher, plus the hyphen (-) and the
underscore (_); they cannot start with a digit, two hyphens, or a
hyphen followed by a digit.
However, the same section also says this:
Backslash escapes are always considered to be part of an identifier or a string.
This means that, while you cannot start an identifier with a digit, you can use backslash escape code (\foo) that will convert to a digit. Note that this rule applies in CSS, but not HTML, where almost any character combination is an acceptable value.
So that's what you're seeing in your code. Numerical HTML class values that must be escaped to work in CSS. Here are some examples:
\31 is the Unicode Code Point for the digit one.
\32 is the Unicode Code Point for the digit two.
\33 is the Unicode Code Point for the digit three.
Another purpose of the backslash escape in CSS is to cancel the meaning of special characters.
The forward slash (/) has special meaning in CSS. It must, therefore, be escaped for proper use.
So let's now decipher the class names in your code:
.\31\/2, .\32\/4, .\36\/12 { width: 50%; }
The first escape (\31) is Unicode for "1".
The second escape (\/2) cancels the special meaning of the forward slash.
So the HTML looks like this:
class = "1/2"
class = "2/4"
class = "6/12"
Here are a few more from your list:
.\31\/3, .\34\/12 { width: 33.33333%; } /* HTML class values = 1/3, 4/12 */
.\32\/3, .\38\/12 { width: 66.66667%; } /* HTML class values = 2/3, 8/12 */
.\31\/12 { width: 8.33333%; } /* HTML class value = 1/12 */
.\35\/12 { width: 41.66667%; } /* HTML class value = 5/12 */
.\31\30\/12 { width: 83.33333%; } /* HTML class value = 10/12 */
.\31\31\/12 { width: 91.66667%; } /* HTML class value = 11/12 */
from what I can gather with what I found online it's mostly escaping going on for some odd naming convention that from what I've read is probably not a great idea to begin with.
.\31\/2, .\32\/4, .\36\/12 { /* this */
.1/2, .2/4, .6/12 { /* translates to this */
width: 50%;
}
.\31\/3, .\34\/12 { /* this */
.1/3, .4/12 { /* translates to this */
width: 33.33333%;
}
I don't know if you've seen this article but the accepted answer breaks it down pretty well. after the \3 is like the start. then the \/ is escaping the slash.
What does .container.\31 25\25 mean in CSS?
I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting width: 0%; on .carousel-controls but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control.
What would be the correct way to do this? I feel like I'm going down the wrong path.
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/
Is this what you are looking for? If so its just some quick changes in your CSS:
#myCarousel {
margin-left: 50px;
margin-right: 50px;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
I updated your js.fiddle here.
It will make your page scroll horizontally. You'd better add .col-10 .mx-auto to .carousel-inner. Always remember to check side effects of your additional pure css on bootstrap modules.
I have a website I am working and the form isn't sitting in the right place it keeps shifting and moving I spoke to tech support they gave me some code it worked for a bit now it's off again can someone please help.
This was the code:
button.et_bloom_submit_subscription {
float: right;
position: fixed;
top: 7px;
right: 310px;
}
.et_bloom .et_bloom_form_content .et_bloom_popup_input {
width: 25%;
}
button.et_bloom_submit_subscription {
width: 21% !important;
}
.et_bloom .et_bloom_inline_form {
left padding: 60px;
}
.et_bloom .et_bloom_inline_form {
margin: 0;
}
.et_bloom .et_bloom_header_outer {
display: none;
}
#media only screen and (max-width:1100px) {
.page-id-453 .et_bloom_form_content {
width: 100% !important;
margin: 0 auto !important;
}
.page-id-453 .et_bloom_form_content .et_bloom_popup_input {
width: 25% !important;
margin-right:2%;
}
.page-id-453 .et_bloom_form_container button {
width: 45% !important;
padding:13px;
top:auto !important;
left: auto !important;
margin: auto !important;
float: right !important;
}
}
And this is the website www.askleewellard.com (form is right below the graphic).
I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.
I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.
Here is my css or less css to be precise
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
#media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Try adding this to the top of your HTML page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/