Mobile CSS for AMP

  • Resolved csaldanha

    (@csaldanha)


    6 years, 2 months ago

    Hello!

    I am trying to pull the CSS to make the widget display properly on the AMP page; however, the formatting is off and it’s pulling the desktop widget instead of the mobile appbox. Below are some examples of the behavior:

    Widget on current AMP Page
    Desired widget for AMP Page

    Would it be possible for you to share the mobile-specific CSS for the widget so it can render like so on the AMP page?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter csaldanha

    (@csaldanha)

    6 years, 2 months ago

    Edit: After tinkering around the AMP CSS a bit more, I’ve managed to get it to how I want. 🙂

    toxiz77

    (@toxiz77)

    5 years, 11 months ago

    csaldanha Could you share with us your CSS code for AMP pages?

    Thread Starter csaldanha

    (@csaldanha)

    5 years, 11 months ago

    /*! CSS Used from: Embedded */
.amp-disqus-comments{padding:0;margin:0}
.amp-disqus-comments amp-iframe {margin:0 10px 0 10px;height:321px}
.amp-wp-enforced-sizes{max-width:100%;}
a{color:#2473B5;text-decoration:none;border-bottom:1px solid #2473B5;}
a:hover,a:active,a:focus{color:#2b90f5;border-bottom:1px solid #2b90f5;}
div.wpappbox *,div.wpappbox:after,div.wpappbox:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
div.wpappbox a,div.wpappbox a:after,div.wpappbox:before{text-decoration:none;color:#323232;-webkit-transition-property:background color;-webkit-transition-duration:.2s;-webkit-transition-timing-function:ease;-moz-transition-property:background color;-moz-transition-duration:.2s;-moz-transition-timing-function:ease;-o-transition-property:background color;-o-transition-duration:.2s;-o-transition-timing-function:ease;transition-property:background color;transition-duration:.2s;transition-timing-function:ease;}
div.wpappbox a img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;}
div.wpappbox a:hover img{opacity:.9;-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-webkit-filter:grayscale(100%);}
div.wpappbox{clear:both;font-family:'Open Sans', Arial;background-color:#F9F9F9;width:auto;line-height:1;color:#545450;margin:16px 0;font-size:16px;border:1px solid #E5E5E5;}
div.wpappbox.compact{height:66px;}
div.wpappbox div.appicon{position:relative;height:112px;width:112px;float:left;padding:10px;background:#FFF;text-align:center;border-right:1px solid #E5E5E5;border-top-left-radius:6px;border-bottom-left-radius:6px;}
div.wpappbox.compact div.appicon{height:66px;width:68px;float:left;padding:6px;}
div.wpappbox div.appicon img{height:92px;max-height:92px;width:92px;max-width:92px;margin:auto;border:0;border-radius:6px;}
div.wpappbox.compact div.appicon img{height:54px;width:54px;max-width:54px;margin:auto;border:0;border-radius:6px;}
div.wpappbox.compact a.applinks{float:right;position:relative;background:#FFF;text-align:center;border-left:1px solid #E5E5E5;border-top-right-radius:6px;border-bottom-right-radius:6px;}
div.wpappbox div.appdetails{font-size:16px;line-height:16px;padding-top:10px;}
div.wpappbox.compact div.appdetails{font-size:15px;line-height:15px;padding-top:6px;}
div.wpappbox div.appdetails>div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:6px 8px;}
div.wpappbox.compact div.appdetails>div{padding:4px 8px 1px;}
div.wpappbox div.apptitle{font-size:19px;line-height:19px;font-weight:600;margin:2px 0 0;}
div.wpappbox.compact div.apptitle{font-size:16px;line-height:17px;}
div.wpappbox.compact a.applinks{height:66px;width:66px;display:block;}
div.wpappbox div.rating-stars{width:65px;height:13px;margin-left:5px;margin-top:4px;display:inline-block;}
div.wpappbox div.stars-monochrome{background:url(https://www.pixelspot.net/wp-content/plugins/wp-appbox/img/stars-sprites-monochrome.png) no-repeat;}
div.wpappbox div.stars45{background-position:0 -117px;}
div.wpappbox a:link,div.wpappbox a:visited{color:#545450;border-bottom:none;}
div.wpappbox a:active,div.wpappbox a:hover{text-decoration:none;color:#5588b5;}
div.wpappbox.googleplay a.applinks{background:url(https://www.pixelspot.net/wp-content/plugins/wp-appbox/img/googleplay.png);}
div.wpappbox.compact.colorful a.applinks:hover{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);}
div.wpappbox.compact a.applinks{background-repeat:no-repeat;background-size:auto 42px;background-position:center 7px;background-color:#FFF;}
div.wpappbox.compact a.applinks{background-position:center center;background-size:auto 48px;}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi){
div.wpappbox div.rating-stars{background-size:65px 143px;}
div.wpappbox div.stars-monochrome{display:none;}
}
@media screen and (max-width: 500px){
div.wpappbox.compact a.applinks{display:none;}
div.wpappbox div.rating-stars{margin-top:0;}
div.googleplay a.apptitle{background:url(https://www.pixelspot.net/wp-content/plugins/wp-appbox/img/googleplay-small.png);padding-left:18px;}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dpi){
div.googleplay a.apptitle{background:url(https://www.pixelspot.net/wp-content/plugins/wp-appbox/img/googleplay-small@2x.png);}
}
div.appdetails a.apptitle{background-repeat:no-repeat;background-position:center left;background-size:auto 13px;}
div.wpappbox.compact{height:60px;}
div.wpappbox div.appicon,div.wpappbox.compact div.appicon{height:60px;width:60px;padding:6px;}
div.wpappbox div.appicon img,div.wpappbox.compact div.appicon img{height:48px;width:48px;max-width:48px;}
div.wpappbox div.appdetails>div,div.wpappbox.compact div.appdetails>div{padding:0 6px;}
div.wpappbox div.appdetails,div.wpappbox.compact div.appdetails{font-size:15px;line-height:15px;padding-top:8px;}
div.wpappbox div.apptitle,div.wpappbox.compact div.apptitle{font-size:16px;line-height:18px;font-weight:600;margin-top:0;margin-bottom:6px;}
}
/*! CSS Used fontfaces */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5UYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEEYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range:U+0102-0103, U+1EA0-1EF1, U+20AB;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSg7aC6SjiAOpAWOKfJDfVRY.woff2) format('woff2');unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShdwxCXfZpKo5kWAx_74bHs.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSp6vnaPZw6nYDxM4SVEMFKg.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSvy1_HTwRwgtl1cPga3Fy3Y.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSvgrLsWo7Jk1KvZser0olKY.woff2) format('woff2');unicode-range:U+0102-0103, U+1EA0-1EF1, U+20AB;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSojoYw3YTyktCCer_ilOlhE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzA7aC6SjiAOpAWOKfJDfVRY.woff2) format('woff2');unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBdwxCXfZpKo5kWAx_74bHs.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzJ6vnaPZw6nYDxM4SVEMFKg.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzPy1_HTwRwgtl1cPga3Fy3Y.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzPgrLsWo7Jk1KvZser0olKY.woff2) format('woff2');unicode-range:U+0102-0103, U+1EA0-1EF1, U+20AB;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzIjoYw3YTyktCCer_ilOlhE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
    • This reply was modified 5 years, 11 months ago by csaldanha.
    toxiz77

    (@toxiz77)

    5 years, 11 months ago

    Unfortunately this code does not work for me. Are there any other options?

    Thread Starter csaldanha

    (@csaldanha)

    5 years, 11 months ago

    I had to choose the “Compact Badge” to get it to work properly.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile CSS for AMP’ is closed to new replies.