-
Search Results
-
This is the new site I am working on --- http://www.johnnycakebooks.com/new/ and I uploaded a logo. partial width, and am using that in the Header and if I look at the site here ---- http://responsinator.com/?url=www.johnnycakebooks.com%2Fnew%2F I see htere are a couple of responsive design problems which I've been trying to correct in style.css, but have made so many adjustments that I have totally confused myself. If someone can offer some help, I'd REALLY appreciate it! These are the problems I'm trying to correct:
1) on ipad and kindle, landscape, the menu in the header widget area is appearing way below, not in line with the logo I uploaded...
2) on ipad and kindle, portrait, the menu in the header widget area is appearing on top of the logo.... Those are the two main problems. Thanks!
Topic: Responsive CSS on Generate
Hey Everyone,
Im working on a site at http://www.doitright.co/
My problem is with the responsive css. Im not entirely familiar with it and I have been trying and experimenting for hours and its starting to get frustrating.
I added a 3 column section under the generate box and I almost have it to where i want it (exactly how the executive 3 widgets respond) , except heres what happens. As you reduce the browser size all is fine at first, then the 3 widgets jump on top of each other which is fine as its supposed to, but then as it gets smaller it switches back to all 3 widgets on the same line?
Can someone please help me figure this out?
Here is my media css
@media only screen and (min-width: 600px) and (max-width: 960px) {body {
width: 95%;
margin: 0 auto;
}.content-sidebar-sidebar #content,
.content-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content #content,
.generate-landing #inner .wrap,
.generate-landing.full-width-content #content,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer .creds,
#footer .gototop,
#footer-widgets,
#footer-widgets .wrap,
#header .widget-area,
#header .wrap,
#inner,
#inner .wrap,
#nav .wrap,
#sidebar-alt,
#subnav,
#title-area,
#footer .wrap {
width: 100%;
}#header {
padding: 3.5% 1.5625%;
text-align: center;
width: 96.875%;
}#title-area {
margin-bottom: 15px;
padding: 0;
width: 100%;
}#title {
float: none;
font-size: 2.25em;
}.header-image #header #title-area {
background-size: contain !important;
width: 100% !important;
}#description {
font-size: 13px;
}#header .widget-area {
float: none;
padding: 0;
width: 100%;
}#generate-box {
float: none;
padding: 0;
width: 100%;
}#header .searchform {
float: none;
}
#generate-box .wrap {
padding: 3.340757238307%;
width: 93.541666666667%
}#generate-box h4 {
-moz-box-shadow: 0px 2px 5px #000;
-webkit-box-shadow: 0px 2px 5px #000;
background: #a61d1d url(images/generatebox-heading-short.png) repeat-x;
box-shadow: 0px 2px 5px #000;
margin: -4.45434298441% -5% 0;
padding: 2.78396% 3.34076%;
}.generate-blue #generate-box h4 {
background: #1d6ea6 url(images/blue/generatebox-heading-short.png) repeat-x;
}.generate-green #generate-box h4 {
background: #6ea61d url(images/green/generatebox-heading-short.png) repeat-x;
}.generate-orange #generate-box h4 {
background: #de5f01 url(images/orange/generatebox-heading-short.png) repeat-x;
}#generate-box img.alignright {
right: -36px;
top: 68px;
width: 38%;
}
#generate-box p {
width: 70%;
}#generate-box form {
background: url(images/arrow.png) no-repeat 0 0;
padding: 5px 0 0 75px;
}#nav li a {
padding: 8px 6px;
}#nav li:first-child {
padding-left: 11px;
}#nav li li:first-child{
padding: 0;
}#nav li:last-child {
background: none;
}#content-sidebar-wrap,
#sidebar-content-wrap,
.sidebar-content #content,
.content-sidebar #content {
float: left;
}.content-sidebar #inner .wrap,
.sidebar-content #inner .wrap {
background: #fff;
}.content-sidebar #content,
.sidebar-content #content,
.full-width-content #content,
.sidebar {
padding: 25px 7.017543859649%;
width: 85.964912280702%;
}.post-image {
margin: 0 40px 30px -40px !important;
}.sidebar {
background: #f7f7f7;
}#footer-widgets .wrap {
padding: 0;
}#generate-home .wrap {
padding: 30px 0 0;
width: 100%;
}#generate-home .widget {
text-align: center;
width: 100%;
}#generate-home .featuredpage .page,
#generate-home .featuredpost .post {
margin: 0 0 30px;
}#generate-home .featuredpage img,
#generate-home .featuredpost img {
margin: 0 0 20px;
}#generate-home a.more-link {
margin: 20px 0 0;
}}
Web Designs By Chrissy | Twitter @designbychrissy
Topic: Executive Theme Widget Areas
Hi all!
I am new to the website design world. I am currently helping to set up a company website with the Executive Theme. It seems like all of the "home" widget areas are not working. I can drag widgets into any other area and they work... except those home areas. For example the "call to action" and the "slider". I have created a responsive slider and it will play in the header but not in the slider area where I would like it. Any help or suggestions would be great. Thanks so much!
I am thinking maybe my "home" page is not configured correctly? I am looking for any help at all!
kate
I asked this via the new support system, but was told to ask here instead (that was a waste of 24 hours... I'm not loving the new system)
How would one make Eleven40 use WordPress 3.4's core header uploader and make the header output responsive? (I need easy swapping of headers, so hard coding 1 header into the CSS isn't going to work).
For reference: http://codex.wordpress.org/Custom_Headers
I thought all I'd need to do is modify the theme_supports call with the new args:
<code>// Add support for custom header
$args = array(
'width' => 1140,
'height' => 170,
'flex-height' => true,
'flex-width' => true,
'header-text' => false,
'uploads' => true,
);
add_theme_support( 'genesis-custom-header', $args);
</code>
...but that's not working by itself so I'm guessing I need to replace the genesis header output function as well, anyone have code for that?
Hi,
How can I change the header right widget so that the text wraps nicer? I'd insert a break in the line but that does look good when viewed in smaller browser. I think if I can set the width of the ext box to about 600 it might look good in full size browser as well as mobil. I am using the responsive GENERATE theme. http;//www.test2013.acmepos.com
[Resolved]Topic: Eleven40 Customisation Responsive Issue
Hi All,
I have adapted the Eleven40 theme for a project to be similar to Minimalist, however, if I view on a mobile the 4 icons are all bunched up and not displaying properly rather than 2 above each other.
I know its me, can anyone offer any advice on where I have gone wrong?
The website is: http://www.magicbrothers.com, only homepage at present hence everything links back to this page.
This is the Responsive Code from style.css
/* Responsive Design
------------------------------------------------------------ */
@media only screen and (max-width: 1200px) {.wrap {
max-width: 960px;
}#content-sidebar-wrap {
width: 770px;
}#content {
width: 400px;
}.content-sidebar #content,
.sidebar-content #content {
width: 630px;
}.content-sidebar-sidebar #content,
.sidebar-sidebar-content #content {
width: 440px;
}.full-width-content #content {
width: 100%;
}.genesis-grid-even,
.genesis-grid-odd {
float: left;
margin: 0 0 30px;
padding: 0;
width: 100%;
}.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
padding: 0;
width: 100%;
}.footer-widgets-1 {
width: 290px;
}.footer-widgets-2 {
width: 300px;
}.footer-widgets-3 {
width: 290px;
}}
@media only screen and (max-width: 800px) {body {
width: 100%;
margin: 0 auto;
}.archive-page,
.content-sidebar #content,
.content-sidebar-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
.wrap,
#content-sidebar-wrap,
#footer .creds,
#footer .gototop,
#sidebar-alt {
width: 100%;
}#inner .wrap {
padding: 20px;
width: auto;
}#header .wrap {
background: url(images/mb-logo.png) top center no-repeat;
}.eleven40-blue #header .wrap {
background: url(images/blue/mb-logo.png) top center no-repeat;
}.eleven40-green #header .wrap{
background: url(images/green/mb-logo.png) top center no-repeat;
}.eleven40-red #header .wrap {
background: url(images/red/mb-logo.png) top center no-repeat;
}#title {
min-height: 62px;
margin: 18px 0 0;
}.menu-primary,
.menu-secondary,
#header ul.menu,
#header .widget-area,
#title-area {
float: none;
text-align: center;
width: 100%;
}#header .searchform {
float: center;
}#header ul.menu {
background: url(images/bg-pattern.png);
float: left;
}.menu-primary li,
.menu-secondary li,
#header ul.menu li {
display: inline-block;
float: none;
}.menu-primary a,
.menu-secondary a,
#header .menu a {
padding: 10px;
}.menu li.right {
display: none;
}.page-title {
font-size: 24px;
padding: 10px 20px;
}.page-title p {
line-height: 1.2;
}.content-sidebar #content,
.content-sidebar-sidebar #content,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content {
border: none;
padding: 20px 0;
width: 100%;
}h1,
h2,
h2 a,
h2 a:visited {
font-size: 30px;
}.after-post form {
background: none;
padding: 0;
}#footer-widgets .widget {
padding: 20px 20px 0;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
margin: 0;
}#footer .creds,
#footer .gototop {
float: none;
}#footer p {
padding: 0 20px;
text-align: center;
}}
@media only screen and (max-width: 600px) {#home-features {
padding: 30px 0 20px;
}.home-features-1,
.home-features-2,
.home-features-3,
.home-features-4 {
padding: 0 0 30px;
width: 50%;
}blockquote {
padding: 30px 10px 5px;
}.split-column-1,
.split-column-2 {
margin: 0;
width: 100%;
}.entry-content .split-column-1 ul {
padding: 0;
}.navigation li a,
.navigation li.disabled,
.navigation li a:hover,
.navigation li.active a {
padding: 5px;
}}
@media only screen and (max-width: 400px) {body,
p,
select,
textarea {
font-size: 16px;
}#header .menu a {
margin: 0 5px;
}}
@media only screen and (max-width: 300px) {.home-features-1,
.home-features-2,
.home-features-3,
.home-features-4 {
padding: 0 0 20px;
width: 100%;
}}
If anyone can help I would really appreciate it.
Thanks
Web Design, Development & Consultancy
Being The Best He Can Be! | http://www.paul-smart.co.uk
I'm working on modifying my logo/header on the eleven40 theme. I'd like to have the picture size taller rather than just the skinny image. Also, now that I've modified the logo (put text on top and made the rectangle bigger) I'd still like this to resize based on screen size. Any tips? http://www.bigstatebiglife.com
Welcome!
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.