+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Developer Discussions (http://get-simple.info/forums/forumdisplay.php?fid=8)
+--- Thread: CTA Links not working in responsive design (/showthread.php?tid=4335)
CTA Links not working in responsive design - Sitebee - 2013-02-20
I wonder if one of you talented people could help me out here with the theme I recently created for GS? The issue is ive made the theme responsive but the nav and social call to actions are not clickable.
I`ve never had this happen before and it`s starting boggle my brain a little, so hoping a fresh pair of eyes pick up the issue.
Demo: http://simplebee.co.uk
Here`s the css and html.
Nav CSS
Code:
.nav {
margin-bottom:15px;
padding:0 15px;
}
.nav ul {
list-style:none;
list-style-position:outside;
}
.nav ul li {
float:left;
font-family:Raleway, sans-serif;
font-size:15px;
font-weight:500;
padding:0 10px;
}
.nav ul li:first-child {
padding-left:0;
}
.nav ul li a {
color:#4a4a4a;
display:block;
height:21px;
line-height:21px;
border:2px solid transparent;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
padding:0 7px;
}
.nav ul li.active a,.nav ul li a:hover {
border:2px solid #029cdb;
background:url(../images/nav-btn.png) repeat-x 0 0;
color:#fff;
text-decoration:none;
}Responsive CSS
Code:
@media only screen and (max-width: 767px) {
.page { width: 380px; }
.header { width: 300px; }
.content { width: 360px; margin-top:60px; }
.block { display:none !important;}
.fright { display:none !important;}
.social {
float:left;
width:300px;
margin-top:80px;
margin-left:50px;
display:inline;
}
.sidebar {
float:left;
width:360px;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.page { width: 420px; }
.header { width: 420px; }
.content { width: 400px; }
.block { display:none !important;}
.social {
float:left;
width:300px;
margin-top:80px;
margin-left:50px;
display:inline;
}
.sidebar {
float:left;
width:360px;
}
}Nav HTML
Code:
<nav class="nav">
<ul>
<?php get_navigation(return_page_slug()); ?>
</ul>
<div class="cl"> </div>
</nav>RE: CTA Links not working in responsive design - n00dles101 - 2013-02-20
line 142, of style.css .block holder: releative.
When you resize that div is obscuring your links and buttons.
RE: CTA Links not working in responsive design - Sitebee - 2013-02-20
Thanks ever so much n00dles101, that did the trick.
