INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Change CSS for Mobile Portrait

Change CSS for Mobile Portrait

(OP)
I have a friend that has a site on Shopify with is enough of a pain in the ass.

This is what she has now...


This is what she wants it to look closer to...


She kept telling me she wanted the flexslider on the page to only show part of the image when displayed in portrait on a smartphone, but after a couple of conversations what she really wants is the caption box on top of the flexslider to fit better on the mobile portrait page.

Index page html

CODE

<div id="homepage_slider" class="flexslider">
    <ul class="slides">
      {% if settings.video_position == '1' %}{{ video_slide }}{% endif %}
      {% if settings.slideshow_1_enabled %}
	    	<li>
	    		<a href="{{ settings.image_1_link }}"><img src="{{ 'slideshow_1.jpg' | asset_url }}" alt="{{ settings.image_1_alt_text | escape }}"  /></a>
	    		{% if settings.image_1_headline != blank or settings.image_1_subtitle != blank or settings.image_1_button_text != blank %}
	    		  <div class="flex-caption">
              <div class="container">
                <div class="columns {% if settings.image_1_text_align == 'left' %} align_left sixteen {% elsif settings.image_1_text_align == 'right' %} align_left seven offset-by-nine {% else %} sixteen {% endif %}">
                  <div style = "background-color:#000000; opacity:0.9; padding:10px 15px 10px 15px; max-width:20vw; min-height:150px; margin-left:10%; margin-top:.005%;"> <!--KELUBBERS-->
                  <h1 class="headline" style="color:{{settings.image_1_text_color}}">{{ settings.image_1_headline }}</h1>
      

                  <p class="subtitle" style="color:{{settings.image_1_text_color}}">{{ settings.image_1_subtitle }}</p>
                  
                  {% if settings.image_1_button_text != blank %}
                    <a href="{{ settings.image_1_link }}" class="action_button">
                

                      {{ settings.image_1_button_text }}
              

                    </a>
            

                  </div> 

device and mobile css

CODE

/* 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%;
     }
} 

So really want I'm looking for is which line in the html tells me which css element I should find to edit. flex-caption? container? columns? And suggestions for the changes.

Thanks

RE: Change CSS for Mobile Portrait

(OP)
I forgot this part of the css

CODE

/*  #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; }

    } 

RE: Change CSS for Mobile Portrait

(OP)
I fixed this by changing the CSS code for min-width, max-width that the prior developer put into the HTML page instead of the CSS page.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close