Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Design Not Working on Mobile
- This topic has 7 replies, 3 voices, and was last updated 10 years, 5 months ago by emasai.
-
AuthorPosts
-
October 18, 2013 at 11:24 pm #67562ChrysulaMember
I'm using the Minimum Theme -- which I specifically chose for Responsive Design.
My site is http://wakeupworldcommunications.com
However, on a cell phone (iPhone 5 using iOS7 browsing in Safari and Chrome) the site is weirdly cut in half and the Nav Bar is no where to be found.
Please note, I am a novice and have no real coding experience other than what I can google to resolve specific issues.
Many thanks!
http://wakeupworldcommunications.com
ChrysulaOctober 19, 2013 at 1:58 am #67592Sridhar KatakamParticipantIn style.css, replace
<link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
with
@import url(http://fonts.googleapis.com/css?family=News+Cycle);
Let us know when done.
October 19, 2013 at 3:12 pm #67714ChrysulaMemberOK, I did exactly that and it did NOT make any difference to the view of the site on a mobile phone. But it did completely squash the font so that letters were much closer together so I changed it back.
Any other suggestions? Is there a way I can post a screen shot of what I'm seeing on my cell or are you seeing it too? Thank you so much!
October 19, 2013 at 4:16 pm #67715emasaiParticipantYou can view the responsive action on a desktop by reducing the width of the browser window. Some browsers actually show you the pixel measurement of the window. It is also easier to debug as you can use a web inspector to find the problem.
The menu disappears at 768px wide and is replaced by an icon which you have to click to display the menu. Very neat function, but if you think your visitors are not going to understand it then you can remove the display: none in the media queries on .responsive-menu and remove the icon. Or you could change the icon to a down arrow with the word menu to make it more evident.
You also need to modify the media queries to remove margin-left from .home-featured and .site-tagline p. Did this theme come like this out of the box?
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOctober 19, 2013 at 5:37 pm #67725ChrysulaMemberI have the menu sorted out, thank you for that!!!
However, I cannot figure out how to remove the left margin per your suggestion Lynne. In fact, ideally I'd like to have the entire site centered, at least for the home page. Perhaps that will help on the responsive design piece also?
This is my entire Media Queries section, but I don't see specifically where to remove a margin-left from .home-featured and .site-tagline p. Can you see what I should remove? (Just to be clear, I am not trained and don't really know css except snippets I can google.) The theme has been adjusted for fonts, colors, removal of button, removal of footer background etc, but nothing at all fundamental.
Many thanks for your attention!
ChrysulaMedia Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1179px) {.wrap {
max-width: 960px;
}.site-header .widget-area {
width: 620px;
}.content {
width: 580px;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar {
width: 280px;
}}
@media only screen and (max-width: 1023px) {.wrap {
max-width: 768px;
}.content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.minimum-landing .site-inner,
.sidebar,
.site-header .widget-area,
.site-tagline-left,
.site-tagline-right,
.title-area {
width: 100%;
}.site-header {
position: relative;
}.site-inner {
padding: 40px 5%;
padding: 4rem 5%;
}.post-type-archive-portfolio .entry,
.site-header .title-area,
.site-header .search-form,
.site-header .widget-area,
.site-tagline-left,
.site-tagline-right {
text-align: center;
}.header-image .site-title a {
margin: 0 auto 10px;
margin: 0 auto 1rem;
}.site-header .search-form {
float: none;
margin: 0 auto;
width: 50%;
}.site-description {
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
}.site-tagline {
margin-top: 0;
padding: 20px 0;
padding: 2rem 0;
}.minimum .site-tagline {
font-size: 16px;
font-weight: bold;
}.minimum .site-tagline {
margin-top: 400px;
margin-top: 40rem;
}.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-tagline-left,
.site-tagline-right {
float: none;
}.site-tagline-left p {
margin-bottom: 20px;
margin-bottom: 2rem;
}.minimum-landing .site-inner {
margin: 0;
padding: 40px 40px 0;
padding: 4rem 4rem 0;
}.minimum-landing .site-container {
padding: 5%;
}.footer-widgets .widget,
.nav-primary .wrap,
.site-footer .wrap,
.site-tagline {
padding-left: 5%;
padding-right: 5%;
}.site-footer {
padding: 20px 0;
padding: 2rem 0;
}}
@media only screen and (max-width: 768px) {.site-header {
padding-bottom: 10px;
padding-bottom: 1rem;
}.title-area {
padding-bottom: 6px;
padding-bottom: 0.6rem;
}.minimum .site-tagline {
margin-top: 200px;
margin-top: 20rem;
}.genesis-nav-menu a {
padding: 20px 10px;
padding: 2rem 1rem;
}.site-footer .nav-secondary a {
margin: 0 10px;
margin: 0 1rem;
}.responsive-menu {
display: menu;
}#responsive-menu-icon {
display: none;
}.home-featured .simple-social-icons ul li a {
font-size: 36px !important;
font-size: 3.6rem !important;
padding: 20px !important;
padding: 2rem !important;
}.genesis-grid-even,
.genesis-grid-odd,
.post-type-archive-portfolio .entry {
width: 100%;
}.post-type-archive-portfolio .entry:nth-of-type(2n),
.post-type-archive-portfolio .entry:nth-of-type(2n+1) {
float: none;
padding: 0;
}.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%;
}}
@media only screen and (max-width: 600px) {.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
width: 50%;
}}
@media only screen and (max-width: 320px) {.header-image .site-header .title-area .site-title a {
background-size: contain !important;
}}
October 19, 2013 at 5:48 pm #67726emasaiParticipantThat is just the point it's not there so your site is using the desktop sizing. In Media Queries you have to specifically tell it what you want different from the regular css. So if the desktop size has .home-featured and .site-tagline p set to margin-left: 120px; you have to write in Media Queries .home-featured and .site-tagline p margin-left: 0; or whatever size it needs to be.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOctober 19, 2013 at 6:40 pm #67729ChrysulaMemberThanks for explaining. I think I have it working now. The tagline and home featured are all centering nicely in the mobile version.
What should I change to have everything centered? The header (my logo), the footer, the text on the various pages? Those are all still skewed to the right... Do I have to change them one by one. And if so, what am I changing? .header , .body , .footer or secondary navigation?
Thank you again!!!!
October 19, 2013 at 9:00 pm #67738emasaiParticipantIf you downloaded the theme in this condition and it did not work like the demo, I think you should open a support ticket with Studiopress. For example, the responsive menu icon is not the same on your site as on the demo, did you modify this?
Otherwise if you want to do it by yourself, you need to go through all the elements using a web inspector and fix the missing elements in the media queries as I explained.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.