The way you've gone about that by floating elements makes it more difficult to change but Use this code...
@media (max-width: 480px) {
div#rt-header .rt-grid-6 .it_link, div#rt-header .myc4 div.it_link + div {
float: none !important;
}
}
@media (min-width: 481px) and (max-width: 767px) {
div#rt-header .rt-grid-6 .it_link, div#rt-header .myc4 div.it_link + div {
float: none !important;
}
}
@media (min-width: 768px) and (max-width: 959px) {
}
@media (min-width: 960px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
Regards, Mark.
The following users have thanked you: ancle