Docs

[Chris Stovall]

I’m working on this page and trying to work it out so she it always in the frame and always the correct size and placement.

Everything is working great, but when the media size goes below 480, which most mobile devices do, the responsive text is not working.

Can you please look at this and tell me whats missing?

http://162.144.201.72/~gianttesting/new-top/

———–

/* RESPONSIVE HEADER */

.gtg-girl-banner  {
    background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
    background-position: 90% 30%;
    background-repeat: no-repeat;
    background-size:50%;

}

@media (max-width: 1100px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 100% 100%;
   	background-repeat: no-repeat;
    	background-size:45%;
    }
}

@media (max-width: 875px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 100% 100%;
   	background-repeat: no-repeat;
    	background-size:50%;
    }
    .btn-space {
	align: center;
	float: center;
	margin-right: 0px !important;
	margin-left: 0px !important;
    }
}

@media (max-width: 765px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 50% 100%;
   	background-repeat: no-repeat;
    	background-size:80%;
    }
    .btn-left {
	float: left;
	margin-left: 50px !important;
    }
    .btn-right {
	float: right;
	margin-right: 50px !important;
    }
}

@media (max-width: 765px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 50% 100%;
   	background-repeat: no-repeat;
    	background-size:80%;
    }
    .btn-left {
	float: left;
	margin-left: 50px !important;
    }
    .btn-right {
	float: right;
	margin-right: 50px !important;
    }
}

@media (max-width: 660px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 50% 100%;
   	background-repeat: no-repeat;
    	background-size:90%;
    }
    .btn-left {
	float: left;
	margin-left: 10px !important;
    }
    .btn-right {
	float: right;
	margin-right: 10px !important;
    }
}

@media (max-width: 480px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 50% 100%;
   	background-repeat: no-repeat;
    	background-size:100%;
    }
    .btn-left {
	float: left;
	margin-left: 10px !important;
    }
    .btn-right {
	float: right;
	margin-right: 10px !important;
    }
}

@media (max-width: 320px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 50% 100%;
   	background-repeat: no-repeat;
    	background-size:100%;
    }
    .btn-left {
	float: center;
	margin-left: 0px !important;
    }
    .btn-right {
	float: center;
	margin-right: 0px !important;
    }
}
    .cds-gap {
	margin-top: -150px;
    }
}

———-

Thanks!
CDS

[Rupok]

Hi there,

Are you referring this text? – http://prntscr.com/da9rrv

It seems you have placed some broken (incomplete or not closed properly) inline CSS that’s eventually breaking the usual generated CSS for responsive text. Let’s remove the your inline code to get expected result.

Thanks!

[Chris Stovall]

No. That’s not it at all.

If you look at the code above, everything is working great other than the changes I put in to the @media (max-width: 320px). The @media (max-width: 320px) codes are not working on the smaller screen sizes.

If you look here, http://quirktools.com/screenfly/#u=http%3A//162.144.201.72/%7Egianttesting/new-top/&w=320&h=568&a=37&s=1 you can see that the button codes and the responsive gap are not being picked up.

The code above shows a few @media codes and they are all working but the @media (max-width: 320px) is not working at all.

[Rupok]

Hi there,

Thanks for writing back. Your last part of code (for @media (max-width: 320px)) seems broken as well. That has an extra closing curly brace. Let’s update the code to following :

@media only screen and (max-width: 320px){
    .gtg-girl-banner  {
    	background-image: url('http://162.144.201.72/~gianttesting/wp-content/uploads/2016/11/grab-the-gold-best-snack-bar-ever-lady-image.png') !important;
   	background-position: 50% 100%;
   	background-repeat: no-repeat;
    	background-size:100%;
    }
    .btn-left {
	float: center;
	margin-left: 0px !important;
    }
    .btn-right {
	float: center;
	margin-right: 0px !important;
    }
    .cds-gap {
	margin-top: -150px;
    }
}

Hope this helps.

[Author]

Posts