CSS Precedence - Can I override the CSS Style Sheet

[notsoevilgenius]

I'm back trying to solve this issue in my ongoing shopify development.

I have these three elements that are next to one another on a large screen, but drop under one another on mobile devices. The client doesn't want that to happen.

<div class="one-third column alpha">
  <a href="[URL unfurl="true"]http://www.royalteacandles.com/pages/heres-whats-new-with-royaltea">[/URL]
<img src="[URL unfurl="true"]https://cdn.shopify.com/s/files/1/0609/7021/files/Candle_News_copy_large.png?16250397705092410604">[/URL]
  </a>
</div>

<div class="one-third column">
<a href="[URL unfurl="true"]http://www.royalteacandles.com/apps/action-shots">[/URL]
<img src="[URL unfurl="true"]https://cdn.shopify.com/s/files/1/0609/7021/files/Reveal_large.png?807054721493180769">[/URL]
  </a>
</div>

<div class="one-third column omega">
  <a href="[URL unfurl="true"]http://www.royalteacandles.com/pages/royaltea-loyaltea-program-faq">[/URL]
<img src="[URL unfurl="true"]http://cdn.shopify.com/s/files/1/0609/7021/files/LoyalTea_large.png?13072167766179154065">[/URL]
  </a>
      </div>

So can I make the adjustment in the HTML page here or do I need to track down the classes listed in these div tags? Again I only want to make sure these elements stay next to one another on small device screens.

Thanks!

 

[notsoevilgenius]

Browsing around and refreshing myself with the rules of css precedents I'm pretty sure I'll have to effect changes in the CSS Stylesheet.

Here's the CSS for governing the various devices

/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing 
    #Media Queries */
/* #Base 960 Grid
================================================== */
    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }
    .container .one-fifth.column                { width: 172px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }
        .container .one-fifth.column                { width: 133px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */
    
    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }
        .container .one-fifth.column { width: 140px; }
        .container .one-fifth.column:nth-child(2n)  { margin-left: 20px }

        {% if settings.mobile_products_per_row == "2" %}
          .container .thumbnail.even, .container .thumbnail.odd  { width: 140px !important; }
          .container div.thumbnail.even  { clear: left }
          .container div.thumbnail.odd  { margin-left: 20px }
          br.product_clear { display: none }
        {% endif %}

        .container .logo.column       { width: 200px; }
        .container .nav.column        { width: 90px; margin-left: 10px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    } 


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
        .container .one-fifth.column  { width: 200px;}
        .container .one-fifth.column:nth-child(2n)  { margin-left: 20px }

        {% if settings.mobile_products_per_row == "2" %}
          .container .thumbnail.even, .container .thumbnail.odd  { width: 200px !important; }
          .container div.thumbnail.even  { clear: left }
          .container div.thumbnail.odd  { margin-left: 20px }
          br.product_clear { display: none }
        {% endif %}

        .container .logo.column       { width: 200px; }
        .container .nav.column        { width: 210px; margin-left: 10px; }
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
/* #Media Queries
================================================== */
  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) { 
    input.contact_email {
      width: 170px;
    }
    h1.collection_title_tags, div.collection_title_tags {
      border-right: 0;
      margin-right: 0;
      padding-right: 0;
    }
    .cloudzoom-lens {
      width:140px;
      height:120px;
    }
  }
/* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .nav ul li { padding: 0 0 0 10px; }
    .flex-caption { top: 0; }
    input.search_box { width: inherit !important;}
  }
/* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
    .collection_menu { display: none; }
    .container div.tag_filter { display: block; }
    #tag_filter, #sort-by {
      margin: 1.5em 0 0.5em 0; 
    }
    .blog_filter {
      display: block !important;
      width: 100%;
    }
    .blog h2 { margin-top: 1.5em }
    .section_select { text-align: center; }
    .or {
      text-align: center;
      width: 100%;
      display: inline-block;
      padding-left: 0;
      padding-bottom: 5px;
    }
    .toggle span {
      display: block;
    }
    .toggle_list {
      display: none;
    }
    select { 
      width:100%; 
    }
    input.contact_email {
      width: 94%;
    }
    .search_page_text {
      text-align: left;
    }
    a.button, 
    button,
    .action_button, 
    a.action_button, 
    textarea {
      width: 85%;
    }

    .flexslider a.action_button {
      width: initial;
    }

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    input.action_button[type="submit"], 
    input.action_button[type="button"],
    .sign_up {
      margin-left: 0 !important;
      width: 100%;
    }

    .cart_icons {
      display: none;
    }
    .credits_right {
      text-align: left;
    }
    .container .column.thumbnail, .container .columns.thumbnail {
      margin-top: 1em;
    }
  .title_column {
      float:left;
    }
  .subtotal_amount {
      text-align:right;
    }
  .mobile_left {
      text-align:left;
    }
  .container div.mobile_only {
      display:block;
    }
  .quantity_label {
    display: inline;
  }  
  .price_total {
    text-align: right;
  }
  .price_total_text {
    display:block;
  }
  .update_subtotal, .price_total, .remove_column, .checkout_table_header {
      display: none;
    }
  .mobile_right {
      text-align: right;
    }
  .quick_shop {
      display: none !important;
    }
  .cart_price {
    display: block;
    margin-bottom: 0;
  }
  table tr th, table tr td {
      padding: 2px;
    }
  input.action_button {
      margin-bottom: 1em !important;
    }
  .multiple_product_images {
      display: none;
    }
  .flex-caption {
    top: 0;
  }
  .flex-caption .headline {
    font-size: 1.5em;
    line-height: 1.5em;
  }
  .flex-caption p.subtitle {
    font-size: 1.1em;
    line-height: 1.1em;
  }
  .container .blog_content {
    padding-left: 0;
    border: 0;
  }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .mobile_hidden { display: none !important }
    ul.menu li.navicon_button { display:inline-block }
    ul.menu li { padding: 0 0 0 10px; }
    ul.nav_buttons { position: relative; top: 10px }
  }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
    .mobile_hidden { display: none !important }
    ul.menu li.navicon_button { display:inline-block; }
    ul.menu li a.cart { padding-left: 25px; }
    ul.menu li a.navicon { padding-left: 28px; }
    ul.menu li { padding: 0 }
    ul.nav_buttons { position: relative; top: 10px; text-indent: -1000em; text-align: left }
    .cart_count { display: none;}
    input.search_box { width: 240px !important;}
    .flex-caption .headline, .flex-caption p.subtitle{
        font-size: 1.1em;
        font-height: 1.1em;
      }
    .flex-caption p.subtitle {
      font-size: 0.9em;
      line-height: 0.9em;
      margin-bottom: 0.5em;
    }  
    .flex-caption .action_button {
      padding: 4px 15px;
      font-size: 12px;
    }
    .flex-direction-nav .flex-prev {display: none;}
    .flex-direction-nav .flex-next {display: none;}

    h1, h2, h1.home, h1.blog_title, h3, h4, h5, h6, .title a { 
        font-size: 150%;
      }
    h1, h1.home, h1.blog_title, .title a, h2 {
        padding:0;
      }
}
@media
  (min--moz-device-pixel-ratio: 2),
  (-o-min-device-pixel-ratio: 2/1),
  (-webkit-min-device-pixel-ratio: 2),
  (min-device-pixel-ratio: 2) {
    ul.menu li a.navicon {
      {% if settings.cart_icon == 'light' %}
        background-image: url({{ 'menu2x.png' | asset_url }});
      {% else %}  
        background-image: url({{ 'menu_dark2x.png' | asset_url }});
      {% endif %}
      background-size: 20px 119px;
    } 
    input.search_box {
      background: #fff url({{ 'search2x.jpg' | asset_url }}) no-repeat 6px;
      background-size: 14px 14px; 
    }
    .nav ul li a.cart {
      {% if settings.cart_icon == 'light' %}
        background-image: url({{ 'cart2x.png' | asset_url }});
      {% else %}  
        background-image: url({{ 'cart_dark2x.png' | asset_url }});
      {% endif %}
      background-size: 16px 64px;
    }
}

@-moz-document url-prefix() {
  input.search_box {
    position: relative;
    top: 8px;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: 100%;
     }
}

Thanks again....

 

[vacunita]

There's nothing to do on the HTML. The Divs are likely either floated or made to be inline-blocks so they remain on the same line as long as their is room to accommodate them. The only way you are going to get them to stay next to each other on a smaller screen, is if there is enough space horizontally to fit them. That means making sure they are small enough to fit in the space provided in the small screen, which can only be done through the CSS.

This:

.container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }
    .container .one-fifth.column                { width: 172px; }

Sets the widths. THey'll need to be smaller to fit in the small screen. so you'll need to set them for each device you want to fix. Thois by the way os going against everything a responsive template is designed for and is likely going to make the divs really really small and cramped.

You are going to have to make your columns narrower.

Also this is an extremely convoluted template.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[notsoevilgenius]

Thanks! I'm now trying to narrow down where to massage the CSS. I've been looking the lines in the CSS - .container .column and .column .one-third. Now I'm not so sure that's where I need to be looking.

 

[Olaf Doschke]

You already have many sections with @media queries taking into account several device sizes.

Collected lines about the device sizes:

[tt]@media only screen and (min-width: 768px) and (max-width: 959px)
@media only screen and (max-width: 767px)
@media only screen and (min-width: 480px) and (max-width: 767px)
@media only screen and (max-width: 959px)[/tt]

How is the resolution of that device? Depending on that parts of the whole CSS are applied.

If you have real small devices it isn't sufficient to have small enough divs, the icons themselves may need to be smaller, divs don't force something inside them to shrink.

Bye, Olaf.

 

[vacunita]

You are going to have to play with the dimensions of the columns and their contents for each screen size. As Olaf points out, this means adjusting widths for each @media section.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[notsoevilgenius]

Thanks guys. I was getting close when I got pulled off this project for something else. I'll be back at it tomorrow morning.

...by the way os going against everything a responsive template is designed for...

I know and I've told the client that. I don't know why this is such a big deal to her...