0

I looked through the previous questions but none touched on my exact issue.I would consider myself to be beginner - intermediate level at html / css. I am working on a basic responsive page using html and css, which swaps out images depending on max screen width in media queries, so that as the max screen width reduces, images switch out for smaller images at certain break points.When I test this locally by dragging the html into a private browsing window and my own hosted domain it works both places as expected.However - when I upload the files to the server where it will be hosted(classic Linux cPanel set up on GoDaddy) all of the images show all the time, instead of only when called by the media query.As part of the troubleshooting I have tried this two ways - the original html has an img src for both sizes of image(which is why it 's commented out in the sample below), but even if I remove the img src calls for the -sm versions, the same problem persists, but ONLY on the cPanel host.

Is there a solution that will get this to play nice with cPanel ? Any input appreciated - thanks!!

    Here is the html :


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GoPlay Families</title>
<meta name="author" content="Janelle Schneider"/>
<meta name="description" content="GoPlayFamilies is a deck of cards that offers 52 fun activities for families."/>
<meta name="google-site-verification" content=""/>
<meta name="Copyright" content="© copyright 2015 GoPlayFamilies All Rights Reserved"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<div id="wrapper">
<!--outer wrapper-->
<!-- header -->
<header>
<div id="logo">
<img src="../images/goplayfamilies.png" alt="">
<!--<img src="../images/goplayfamilies_sm.png" alt="">-->
</div>
<div id="tagline">
<img src="../images/deckofplayingcards.png" alt="">
<!--<img src="../images/deckofplayingcards_sm.png" alt="">-->
</div>
</header>
<!-- main content -->
<main>
<div id="maincontainer">
<div id="fade">
<h1>Coming Soon</h1>
<p></p>
<div class="main-img1">
<img src="../images/goplayappicon.png" alt="">
</div>
<div class="main-img2">
<img src="../images/topcardbox_sq.png" alt="">
</div>
</div>
</div>
</main>
<!-- footer -->
<footer>
<p>
<div class="copyright">&copy; Copyright GoPlayFamilies. All Rights Reserved. </div>
</footer>

Here is one of the css media queries:

@media only screen and(max-width: 594 px) {
#logo {
      background - image: url("../images/goplayfamilies_sm.png");
      background - repeat: no - repeat;
      height: 100 % ;
      width: 100 % ;
      margin - left: auto;
      margin - right: auto;
      margin - top: 0 % ;
        }
#tagline {
            background - image: url("../images/deckofplayingcards_sm.png");
            background - repeat: no - repeat;
            height: 100 % ;
            width: 100 % ;
            margin - left: auto;
            margin - right: auto;
            margin - top: 5e m;
        }
header {
            display: block;
            background - position: top;
            height: 150 px;
            width: 100 % ;
            padding: 20 px;
            background: #621417;
        }
main {
            display: block;
            width: 100%;
            background-color: # 4 b514d;
            bottom: 0;
            top: 0;
            height: 100 % ;
        }

h1 {
            font - size: 1.5e m;
            margin: auto;
        }

#maincontainer {
            height: 100 % ;
            display: table;
            margin - left: auto;
            margin - right: auto;
            padding: 0 10 % 10 % 10 % ;

        }
.main - img1 {
                float: none;
                margin: auto;
                margin - top: 27 px;
            }
.main - img2 {
                margin: auto;
                padding: 10 % ;
                margin - top: 27 px;
            }

    }
paintbetty
  • 11
  • 1
  • At least you can post valid code, not our job to go through all your added white space! – Adam Buchanan Smith Aug 20 '15 at 22:33
  • wow, really? I dont have any control of how my pasted code gets formatted here - which is not the way it is in my document. Why do you feel the need to be negative about this? Just dont answer my question. – paintbetty Aug 20 '15 at 22:35
  • 1
    Because a good answer is a clear answer, with samples like a fiddle to show a working model of the answer. There is so many things wrong with your page it is hard to figure out what should and should not be there. It IS NOT our responsibility to GUESS on what you meant or how it is in your actual CSS. Make a clear question and get a clear answer, that is how SO works. – Adam Buchanan Smith Aug 20 '15 at 22:38
  • See this is a new user who made a clear and well written question, follow what this guy does http://stackoverflow.com/questions/32129524/css3-strange-padding-on-bottom-of-an-image – Adam Buchanan Smith Aug 20 '15 at 22:53
  • I have edited my code. My question was just as clear and well written - that users issue was much simpler than my issue. Adam, do you have any intention of helping me? If not let someone else please. Thank you. – paintbetty Aug 20 '15 at 23:10
  • http://stackoverflow.com/help/be-nice – paintbetty Aug 20 '15 at 23:35

2 Answers2

0

I think i understand your issue with your site, if i will wrong then let me know..

Simple you should add img tag-selector in your css file and give it a property max-width:100%

Example is given below

   img {
max-width:100%;
}
Saqib Hassan
  • 3
  • 3
  • hi Saqib, thanks for your response. Are you suggesting that I use img {} instead of background-image: url() ? thanks! – paintbetty Aug 20 '15 at 22:22
0

I wanted to share what the issue was, and the solution - I found it myself, with a little help from a friend.

The images that were behaving incorrectly were being called in both the html and the css. Once I removed the paths from the html the page loads and displays responsively the correct way everywhere.

paintbetty
  • 11
  • 1