Results 1 to 2 of 2

Thread: Media Query Help!

  1. #1
    Join Date
    Nov 2014
    Location
    Rochester, NY
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Media Query Help!

    Hi guys, so I am having an issue with my media queries and I’m not sure why– in my child theme, I am trying to scale the slider on my homepage and also re-space my footer widgets for different screen sizes– the 320px/iphone resolution is working fine, but for some reason when I try to do media queries for larger screen sizes like 480 or 768, all my code is being ignored. I’m almost positive I have my brackets in the right place, so can anyone tell me what I’m doing wrong? I appreciate any pointers, thanks!


    Here is what I have-- so far, I am just trying to resize the homepage slider and make sure the footer widgets are fitted correctly:
    Code:
    /* MEDIA QUERIES
    ———————————————————–*/
    
    @media only screen and (min-width: 501px) and (max-width: 768px) {
    
    .site-footer {
    float: center;
    text-align: center;
    margin-top: -60px !important;
    }
    
    .footer-widgets {
    float: center;
    text-align: center;
    margin-top: -60px !important;
    }
    
    #rev_slider_3_1, #rev_slider_3_1_wrapper {
    width: 600px !important;
    height: auto;
    margin-right: _15px !important;
    float: center;
    }
    
    .footer-widgets-3 {
    padding-bottom: 100px;
    }
    }
    
    @media only screen and (min-width: 451px) and (max-width: 500px) {
    
    #rev_slider_3_1, #rev_slider_3_1_wrapper {
    width: 400px !important;
    height: auto;
    }
    
    .tp-leftarrow {
    display: none !important;
    }
    
    .tp-rightarrow {
    display: none !important;
    }
    
    }
    
    @media only screen and (max-width: 450px) {
    
    .tp-leftarrow {
    display: none !important;
    }
    
    .tp-rightarrow {
    display: none !important;
    }
    
    #rev_slider_3_1, #rev_slider_3_1_wrapper {
    
    width: 288px !important;
    height: auto;
    
    }
    
    .entry-content {
    margin-top: -80px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    }
    
    .site-inner {
    margin-top: -20px !important;
    }
    
    .entry {
    padding-bottom: 0 !important;
    }
    
    body {
    background-size: contain;
    background-color: #fff;
    font-size: 16px;
    }
    
    .site-inner,
    .wrap {
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 0 !important;
    }
    
    .archive-description,
    .author-box,
    .comment-respond,
    .entry,
    .entry-comments,
    .entry-pings,
    .sidebar .widget,
    .site-header {
    padding: 0 !important;
    
    }
    
    .entry{
    margin-top: -40px !important;
    }
    
    .entry-content {
    margin-top: -40px !important;
    
    }
    
    .footer-widgets-1 {
    margin-top: -60px !important;
    }
    
    .footer-widgets-3 {
    padding-bottom: 20px !important;
    
    }
    
    .archive-pagination li a {
    margin-bottom: 4px;
    }
    
    .five-sixths,
    .four-sixths,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fourths,
    .three-sixths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    margin: 0;
    width: 100%;
    }
    
    .sidebar .widget.enews-widget {
    padding: 0 !important;
    }
    
    .metaslider {
    
    width: 260px !important;
    height: auto;
    padding-bottom: 0;
    
    }
    
    #metaslider_271 {
    
    width: 260px !important;
    height: auto;
    padding-bottom: 0;
    }
    
    #metaslider_container_271 {
    
    width: 260px !important;
    height: auto;
    padding-bottom: 0;
    }
    
    }

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It would be easier if you provide a link to your page and then we can troubleshoot live in a browser with dev tools.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. css media query issues
    By ianhaney in forum CSS
    Replies: 0
    Last Post: 11-05-2014, 07:28 PM
  2. Replies: 1
    Last Post: 03-01-2013, 01:49 PM
  3. Streaming media
    By moorech in forum Looking for such a script or service
    Replies: 2
    Last Post: 12-28-2011, 11:04 PM
  4. Media RSS Script
    By dazbobaby in forum Looking for such a script or service
    Replies: 3
    Last Post: 02-13-2009, 12:33 AM
  5. Media files
    By southga1974 in forum Other
    Replies: 1
    Last Post: 06-13-2006, 01:12 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •