Forum Replies Created
-
AuthorPosts
-
ChrysulaMember
Thanks 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!!!!
ChrysulaMemberI 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;
}}
ChrysulaMemberOK, 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!
ChrysulaMemberSo obvious and so great. THANK YOU!!!!
ChrysulaMemberThank you so much! Got it at last!!!
-
AuthorPosts