Andykev

Change line 1468 to 100%

.welcome-features .wrap {
    background-color: transparent;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0 10px;
    width: 100%;
}

This replaces the fixed pixel width.
Your picture will size properly.

Is something not working for you on the theme? Or trying to do something different?

I have both themes and each works wonderfully.

Jonathon,

Add this to your .css and it fixes your problem. I tried it and success!

.header-image .site-title a {
background-size: contain !important;
}

Try this:

.header-image .site-title a {
	float: left;
	min-height: 164px;
	width: 110%;
}

Line 2055 of the css
Adding 10% to the width does tweak it to center, but not perfectly. Might try if you don’t want to edit the logo image.

Rik,
Please post a link to your site so we can see what is going on. 🙂

The last part is missing from your .css, so when you edit your style.css be sure to SAVE to retain the changes. Or you can do the same from your C-Panel via your provider, edit the file there as well.

Easy! You have “white” (#fff;) selected and thus it does not show!

.responsive-menu-icon::before {
	color: #999;
	content: "\f333";
	font: normal 32px/1 'dashicons';
	margin: 0 auto;
}

Go to line 2281 of your theme .CSS and change “fff” (white) to “999” (black). Or whatever color which will not wash out with the white background.

The link to the Legacy demo is

http://demo.appfinite.net/legacy/

All the pages are typical Genesis layout. The home page is wigitized. When I build my site, I placed a plain text widget in each area and saw immediately which ones I needed, and were they were located.

Are you trying to import images and text from each area?

Ok Bonnie That is the above solution to your responsive menu, the incorrect text colors, and the line spacing to the responsive menu.

Good Luck and Happy Computing!

You also need to fix this on line 4305:

	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #999;
	}

On your theme “responsive menu” (small screens) the hover does not work. Why? You set the hover color to white so moving the mouse over it causes the text to disappear. The white color is the correct color for the “theme color” you selected (RED) but you modified elsewhere, so changing the background color to white (you removed the red), thus you also need to change the text to a contrasting color.

Your header logo inmage also is getting cut off when it shrinks to smaller screens.

Adding this:

.header-image .site-title a {
background-size: contain !important;
}

It fixes that problem. I am still looking at your code. I FOUND IT!

.responsive-menu-icon::before {
	color: #999;
	content: "\f333";
	font: normal 32px/1 'dashicons';
	margin: 0 auto;
}

You had color set as #fff which is why it is not showing up! I changed it to #999 and voila!

Did you change the j.querry, or any PHP files regarding the menu or media?

Here is the original EPIK style.css Note it contains the @media in the bottom section.

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */

@media only screen and (max-width: 1180px) {

	.wrap,
	.site-header {
		max-width: 960px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 740px;
	}

	.content,
	.site-header .widget-area {
		width: 620px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 400px;
	}

	.sidebar-primary,
	.title-area {
		width: 300px;
	}
	
	.hf1,
	.hf3,
	.hf4,
	.hf5,
	.hf6,
	.hf7,
	.hf8,
	.hf9,
	.hf14 {
		/*background-attachment: scroll;*/
		background-position: top;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		background-size: auto;
	}

}

/* iPads (portrait)
--------------------------------------------- */

@media only screen and (max-width: 1023px) {

	.content,
	.content-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.site-header .widget-area,
	.title-area,
	.wrap {
		width: 100%;
	}
	
	.site-header,
	.nav-primary .wrap,
	.nav-secondary .wrap,
	.slider .wrap,
	.welcome .wrap,
	.home-feature-bg .wrap,
	.home-feature-bg-alt .wrap,
	.home-feature-bg-dark .wrap,
	.footer-widgets .wrap {
		width: 90%;
	}
	
	.title-area {
		padding: 16px 0;
	}
	
	.header-image .site-header,
	.header-image .site-header .wrap {
		background-position: center top !important;
	}
	
	.site-header .widget-area {
		text-align: center;
	}

	.site-inner {
		padding-left: 5%;
		padding-right: 5%;
	}

	.site-inner {
		background: none;
	}
	
	.nav-primary {
		background-repeat: repeat-y;
	}

	.genesis-nav-menu li,
	.genesis-nav-menu > .right,
	.site-header ul.genesis-nav-menu,
	.site-header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	.site-description,
	.site-header hgroup,
	.site-header .search-form,
	.site-title {
		text-align: center;
	}
	
	.genesis-nav-menu .menu-item {
		display: inline-block;
		float: none;
	}

	.genesis-nav-menu a,
	.genesis-nav-menu > .first > a,
	.genesis-nav-menu > .last > a { }
	

	.site-header .search-form {
		margin: 16px auto ;
	}

	.sidebar .widget.enews-widget {
		padding: 40px;
	}
	
	.wp-caption {
		width: 100% !important;
	}
	
	.footer-widgets .widget {
		margin-bottom: 40px;
	}

}

/* iPad/Tablets (portrait and landscape)
--------------------------------------------- */

@media only screen and (max-width: 960px) {

	.feature-margin {
		margin: 0;
	}

}

/* iPhones (portrait and landscape)
--------------------------------------------- */

@media only screen and (max-width: 767px) {

	.home-feature-3,
	.home-feature-4,
	.home-bottom-sidebar-1,
	.home-bottom-sidebar-2,
	.home-bottom-sidebar-3,
	.home-bottom-sidebar-4,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.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 {
		margin: 0;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

	.nav-primary .responsive-menu-icon {
		margin-top: 20px;
	}

	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}

	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}

	.genesis-nav-menu.responsive-menu li.current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover {
		border: none;
		display: block;
		padding: 20px;
		text-transform: none;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;	
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}

	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f347";
		float: right;
		font: normal 20px/1 'dashicons';
		height: 20px;
		padding: 15px 20px;
		right: 0;
		text-align: right;
		z-index: 9999;
	}

	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
	}

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu {
		display: none;
	}

	.genesis-nav-menu.responsive-menu .sub-menu {
		background-color: rgba(0, 0, 0, 0.05);
		left: auto;
		opacity: 1;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}

	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		padding: 20px;
		position: relative;
		text-transform: none;
		width: 100%;
	}

	.genesis-nav-menu.responsive-menu .current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu > li.menu-item-has-children:hover > a,
	.genesis-nav-menu.responsive-menu a:hover {
		background: none;
	}

	.site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a:hover,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu > .menu-item-has-children:before,
	.site-header .genesis-nav-menu.responsive-menu > li:hover > a,
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}

	.nav-primary .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu {
		background-color: rgba(255, 255, 255, 0.05);
	}
	
	.feature-left,
	.feature-right {
		width: 45%;
	}
	
	.home-feature-10,  
	.home-feature-12 {
		width: 48%;
	}
	
	.home-feature-11,
	.home-feature-13 {
		float: right;
		margin: 0;
		width: 48%;
	}
	
	.home-feature-12 {
		clear: both;
	}

	.search-form {
		width: 80%;
	}
	
	.content .portfolio {
		width: 48%;
	}
	
	.content .portfolio .post-image {
		width: 100%;
	}
	
	.home-feature-10 img, 
	.home-feature-11 img, 
	.home-feature-12 img, 
	.home-feature-13 img {
		width: 100%;
	}
	
	.plan-col, 
	.plan-col-popular {	
		float: none;
		margin: 0 auto 40px;	
		width: 80%;
	}

}

@media only screen and (max-width: 580px) {

	.home .wrap {
		text-align: center;	
	}
	
	.site-header .wrap {
		width: 90%;
	}
	
	.welcome-feature-1, 
	.welcome-feature-2,
	.welcome-feature-3,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.home-feature-8,
	.home-feature-9,
	.home-feature-10,
	.home-feature-11,
	.home-feature-12,
	.home-feature-13,
	.home-feature-14 {
		margin: 0 auto;
	    text-align: center;
	    width: 100%;
	}
	
	.feature-left {
		float: none;
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
	
	.feature-right {
		float: none;
		margin: 40px auto 0;
		text-align: center;
		width: 100%;
	}

}

@media only screen and (max-width: 480px) {

	.site-header {
		width: 100%;
	}
	
	.content .portfolio {
		text-align: center;
		width: 100%;
	}
	
	.content .portfolio .post-image {
		width: 100%;
	}
	
	.content .portfolio .more-link {
		margin: 20px auto 0;
		padding: 6px;
		width: 60%;
	}
	
}

This is the part of the .css which handles the resizing of the menu on small screens. You also have to have the functions properly configured as well.

This must be in your Theme Functions PHP file:

//* Enqueue Scripts/Styles
add_action( 'wp_enqueue_scripts', 'epik_enqueue_scripts_styles' );
function epik_enqueue_scripts_styles() {

	wp_enqueue_script( 'epik-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700', array(), PARENT_THEME_VERSION );
	wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
	
}

Confusing. In Epik, I can go to Dashboard-Appearance-Editor. Make sure you’re editing the EPIK theme from the upper drop down. Then go to the Style.css and scroll to the bottom section and you can add the “@media” to the areas in question…then SAVE. Don’t know why it isn’t working for you.

Something happened to the CSS in your theme. OK here is what is missing:

@media

*
Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */
 only screen and (max-width: 1180px) {

In the bottom section of your CSS dealing with Media Queries…

it should be like this:

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */

@media only screen and (max-width: 1180px) {

So the “@media” is missing before the code on the following lines of your css:

4076
4176
4367
4418

That is why your menu is not working correctly when the screen is resized for smaller screens.
Please put that back in and it fixes it, and will test ok.

You are missing one thing, the “:”

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: 10px;
}

Add that and the “hamburger” icon menu disappears. Its around line 2276 of your CSS

Careful about cut and paste from one theme to another, sometimes the theme CSS requires a file in your Theme PHP. Didn’t look at all your code, just the problem you asked about, making the icon go away.

Do you want it to appear on Iphone, or tablet sized displays?

However, I just remembered you can’t use column classes in this theme to make “5”.

Due to the grid layout, Genesis drops support of the fifths class family (one-fifth, two-fifths, three-fifths, and four-fifths). This is logical since the grid that Genesis adopts is from Twitter Bootstrap, and they didn’t include it. Since the Bootstrap grid was based on 12 columns, fifths does not naturally “fit” within the grid. 1, 2, 3, 4 and 6 are equally divisible into 12.

Three, Four, or Six will work. Changing to allow 5 will cause all sorts of trouble with the theme. WARNING adding the “column classes” from Genesis you can get off some of the sites and adding it to the CSS in your theme (tacking it on) will get you the WSOD.

Five columns is getting small for a home page. Three or four are better. It depends what you are putting in there.

I forgot to mention. This will reverse your list order. You will have to adjust the menu to be in the order you want. Do this in the regular menu section of your dashboard.

And you’re very welcome.

Tom, put this in place, it does not add any border, just rounds your corners on the existing menu.
That is what you were looking for.

.menu .current-menu-item a {  
	background: #24FF24;
    color: #fff;
	boder-radius: 25px,
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
}

Tom.

Check hou this webpage which is a “rounded corner” generator. You can play with the settings to achieve the look you want, and it shows the proper code used in your .CSS to make it happen. Top link is rounded corners for any box..the botton is for designing menu’s.

http://www.cssportal.com/css3-rounded-corner/

http://www.cssportal.com/css-menu-generator/

Add Geneis Simple Edits as a plugin. There is a line in that admin panel which allows you to insert whatever footer message you wish. It’s a must have. You’ll be glad you did.

If you prefer to simply change your theme .php file you can accomplish the same thing.

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//* Customize the entire footer
remove_action( ‘genesis_footer’, ‘genesis_do_footer’ );
add_action( ‘genesis_footer’, ‘sp_custom_footer’ );
function sp_custom_footer() {
?>
<p>© Copyright 2012 My Domain · All Rights Reserved · Powered by WordPress · Admin</p>
<?php
}

Do you mean the page.id?

<body class=”page page-id-1793 page-template-default ……..”

Or do you mean the page you created does not appear in your admin panel?

I think the front-page.php and home.php do not have page id’s., and do not show in the admin panel.
Removing your widgets from all the areas on the template will revert your page to the default which is recent posts.

If you are talking about this:

Sidebar Widget
Add copy here…
Simple Social Icons Plugin

It is because you have a widget placed in the HOME FEATURE # 3 #7 or #9 areas.
Remove the widget for Simple Social Icons from that area, and place it into the Primary Sidebar widget location. Then each page on the site will show the Icons if you select the page template with the sidebar. Full page template will not show. I think that is what happened.

Hi! The demo’s are up to show the potential of each theme. Each is basically the same in your “admin” workload. These themes are set up with widget areas. Look at the layouts in the samples and you get the idea of what is “possible”. You do not have to use “ALL” the areas (widgets), just the ones you need.

I use Legacy and Epik. Each slightly different in their layout. I use almost all the areas in the Legacy, but not as many in the Epik. The nice thing about the Epik is the ability to expand as needed.

Remember, you can put photos, sliders, text..whatever..in each widget. The widget area is almost like a mini-webpage. I use the TinyMCE visual editor (maybe WP-Edit) whatever it’s called and that gives me a “control panel” in the widget just like on a full webpage.

And, depending on your needs, or what type of business, forum, or service you provide, that will determine which direction you might lean to.

Hopefully the showcase will be coming soon and you can see examples.

Biagio,

Perhaps a plug-in? I have used this and it is great. Works on Iphone too. This puts the social medial icon on the webpage and it “floats”. This is someting to try, and see if you like what it does.

https://wordpress.org/plugins/floating-social-media-icon/

Tom,

I just checked your website on my Iphone and the menu items “highlight” to red when selected. I am not seeing any black lines between the box, just probably a 1px outline aroung the button.

Your CSS is in the “style.css” on your theme. You go to the wordpress dashboard under appearance-editor and that takes you to the files of your theme. Careful! make a copy before changing anything.

Also, open your browser (Chrome) and right click the page. At the bottom is “inspect element”. Powerful tool to look at where things are, and what code is affecting the part of your website in question. Firefox does the same (it’s easier for me).