Andykev

You need to upload the image you want to have as your header “logo”. Then we can check it out. With your actual image missing, anything is a guess.

If your logo does not size properly on smaller screens (responsive) you need to add this code:

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

What this does is it forces your image to resize to small screens so it is not “cut off”. But depending on what you use for the logo image, it could “increase” your gap (space) between the hamburger icon menu and the image.

Need to see it.

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

place at end of your style.css

On your page settings, the Layout has “Archive” as layout option. There is also an “Archive Widget” if you want to use that on your Home page.

The Archive PHP is in the parent theme: Genesis. In your Geneis Theme Options you can make some choices on how the Archive appears.

<?php
/**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    http://my.studiopress.com/themes/genesis/
 */

//* Template Name: Archive

//* Remove standard post content output
remove_action( 'genesis_post_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

add_action( 'genesis_entry_content', 'genesis_page_archive_content' );
add_action( 'genesis_post_content', 'genesis_page_archive_content' );

/**
 * This function outputs sitemap-esque columns displaying all pages,
 * categories, authors, monthly archives, and recent posts.
 *
 * @since 1.6
 *
 * @uses genesis_a11y() to check for headings choice.
 * @uses genesis_sitemap() to generate the sitemap.
 *
 */
function genesis_page_archive_content() {

	$heading = ( genesis_a11y( 'headings' ) ? 'h2' : 'h4' );

	genesis_sitemap( $heading );

}

genesis();
<!--formatted--><!--formatted-->

Robert, the “Demo” Imagery theme does not do what is happing in your video. Do you have a link to the site?

Have you tried

http://whatismyscreenresolution.net/multi-screen-test

to see if there is a format problem upon arriving at the desired screen size, opposed to only happening as you shrink the screen size using the mouse?

This will not work. Check out the WordPress codex link for a full outline of what the “read more” tag is about.

<p>Methodist University – Professional MBA at Pinehurst – Enrollment <!–more Listen Now!–> Audio Production, Voice Casting, Voiceover <iframe src=”https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/237319232&color=0293b0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false” width=”100%” height=”166″ frameborder=”no” scrolling=”no”></iframe></p><!--formatted--><!--formatted-->

https://codex.wordpress.org/Customizing_the_Read_More

From the link to your site, if you want to change the “READ MORE” in the button on ALL the portfolio boxes, you need to go into the THEME FUNCTIONS and change the text from “read more” to “Listen Now!”

It is in this section:

 * Custom Read More link.
 *
 * @author Wes Straham
 * @since 1.0.0
 */
	function portfolio_read_more_link() {
		return '<a href="' . get_permalink() . '" rel="nofollow">Read More</a>';
}
<!--formatted--><!--formatted-->

You are looking for the theme Portfolio page template. again….CAREFUL doing this.

Once changed, ALL the boxes will have “LISTEN NOW” instead of “READ MORE”

It is on line 54 of your page_portfolio.php Again be careful to type and change just the area between the > < and save.

Yes, one, not both.

The change can easily be made in your Portfolio Page Template in your functions (page_portfolio.php). BE CAREFUL when doing this!

Look in this section:

/**
 * Custom Read More link.
 *
 * @author Wes Straham
 * @since 1.0.0
 */
	function portfolio_read_more_link() {
		return '<a class="more-link" href="' . get_permalink() . '" rel="nofollow">Read More</a>';
}
<!--formatted-->

The part

>Read More<

can be changed to something else, like “Continue…” or “More..”.

If you use “View More”, or “Listen Now” those terms will be on all boxes. So if some are for viewing, and others are for listening, you’ll need to come up with a fairly generic term (other than “READ”) to prompt the web visitor to continue on.

Changing the text works on ALL the portfolio in this example. I am sure there is a way to do it individually for every conceivable post type, but that is way beond the scope of this forum.

You might also try using the <!-more-> tag.

There’s a button for it in WordPress when you are editing a post… or, you can use this: <!–more–> wherever you want the “Read More” break to be. The “more” text can be changed to anything you want, as well.

Just make sure to keep the “more” spot at the beginning, add a space, and then type whatever you want, like this: <!–more But wait, there’s more!–>

You can set the columns (two, three, four…) by changing that part.

Put the Bullet Points inside each column (class).

In a responsive view (small screen) the text will change, so be aware design wise how many columns you add on a page, and what the contents are inside the column.

<div style="width: 100%; left-margin: auto; right-margin: auto;">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

<div class="one-third first"><div style="width: 100%; left-margin: auto; right-margin: auto;">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div></div>

<div class="one-third"><div style="width: 100%; left-margin: auto; right-margin: auto;">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div></div>

<div class="one-third"><div style="width: 100%; left-margin: auto; right-margin: auto;">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div></div>

The first bullet point is outside the columns, then there are the three columns.

Hi!

Do this:

//* Remove the header right widget area
unregister_sidebar( 'header-right' );

(I added the .css below w/o doing the remove header widget and it worked, so try)

Add this to your .css

/* Full width header, no widgets */

.title-area .site-title a {
    background-position: center center!important;
    float:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

Everything is possible, but you are going down the path of either hiring a web person to do the design or modification for you, or doing it yourself.

These .php templates in the Epik theme show how the widgets are coded. Then you will need the .css to make it look the way you want. As you might guess, it’s more involved than the scope of a website chat forum.

Theme Functions (functions.php)
Home Page Template (page_home.php)
Landing Page Template (page_landing.php)
Portfolio Page Template (page_portfolio.php)

This plugin might be what you are looking for if you simply want to control where widgets show up on a page. I have used it to show a widget on one page, but excude others.

Display Widgets v. 2.05

https://wordpress.org/plugins/display-widgets/

.epik-landing .wrap {
	margin: 0;
    width: auto;
max-width: none;	
}

On this section, remove the “margin 0;” then the footers will align in the center.
Change to:

.epik-landing .wrap {
    width: auto;
max-width: none;	
}

Or…you could change the 100% to 70% or 60%… it’s on line 161 at the beginning of your style.css

Nate, your link comes back

Not found, error 404

The page you are looking for no longer exists. Perhaps you can return back to the site’s homepage and see if you can find what you are looking for. Or, you can try finding it by using the search form below.

Sorry, missing something. Didn’t quite work. It contains the text, until the very smallest screen. Need to look again.

I think you have it just about right. If you go to this nifty website and enter the URL for your website, it gives you a view (test) image on any device. Great to see how your site looks on different devices.

http://responsivetest.net/#u=http://www.loyelstudios.com/|640|1136|2

Happy Thanksgiving!

Line 155 add some padding “padding-top: 160px”

body {
	background-color: #fff;
	color: #333;
	font-family: Open Sans, sans-serif;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 300;
	line-height: 1.625;
	margin: 0px;
	padding-top: 160px;

Since WordPress 2.1, when the static front page functionality was introduced, the blog posts index and site front page have been treated as two different query contexts, with is_home() applying to the blog posts index, and is_front_page() applying to the site front page.

try if (is_front-page()

??

OK. I just checked Chrome, IE, and Firefox, and Iphone on your site. All are working fine with the space removed and the correct .css is showing.

If you cleared your website cache, then you need to go to your website browser (computer) and clear cache / history, etc. and refresh.

It’s been fixed and looks great..but you’ve got something stopping you from seeing your changes. This can goof things up as you make changes (the right ones) and don’t see them, so you mess with another area and so on…and that gets pretty frustrating. Sorry, can’t see what is up from your chair!

Here is a screen shot. It works, the white space is done. This is using the “inspect element” on your browser.

/* 
Home Feature BG Alt 
---------------------------------------------------------------------------------------------------- */

.home-feature-bg-alt {
	background: #fff;
}

.home-feature-bg-alt .wrap {
	margin: 0 auto;
	overflow: hidden;
	padding: 120px 0 80px;
	width: 1140px;
}

Tim,

Not sure where you are adding this to your .css. The above code is standard original from the Epik theme. Simply change the padding of 120 to 0px 0 80px;

This removes the white space. Is there a chance you are adding this to your “pink” section which you altered the colors? In other words, are you doing it twice? Or it’s causing a conflict if so?

I changed the color choices for my site by creating a whole new color selection, which then is available from the drop down menu in the WP customizer (Theme settings). I had to change the functions.php file to add the new “menu item”, and then I simply cut/pasted one of the existing color areas, and renamed it to my new color. This way any changes I did pertaining to color custimizations on the website would be retained in that “selection”.

// Create additional color style options
add_theme_support( 'genesis-style-selector', array( 
	'epik-black' 		=>	__( 'Black', 'epik' ),	
	'epik-blue' 		=>	__( 'Blue', 'epik' ),
	'epik-darkblue'		=>	__( 'Dark Blue', 'epik' ),
	'epik-gray' 		=> 	__( 'Gray', 'epik' ),	
	'epik-green' 		=> 	__( 'Green', 'epik' ),
	'epik-orange' 		=> 	__( 'Orange', 'epik' ), 
	'epik-pink' 		=> 	__( 'Pink', 'epik' ),
	'epik-sage' 		=> 	__( 'Sage', 'epik' ), 
	'epik-purple' 		=> 	__( 'Purple', 'epik' ), 
	'epik-red' 		=> 	__( 'Red', 'epik' ),	 
) );<!--formatted--><!--formatted-->

The above is the color choices, and I added “sage” (a light green). Then I changed the .css to this:

/* Epik sage
--------------------------------------------- */
 
.epik-sage a {
 	color: #8f9779;
}

.epik-sage .site-title a:hover {
	color: 	#ddd;
}

.epik-sage .site-description {
	color: #ddd;
}

.epik-sage .genesis-nav-menu a {
	color: #fff;
}

.epik-sage .site-header .widget-area {
	color: #eee;
}

.epik-sage .genesis-nav-menu a:hover,
.epik-sage .genesis-nav-menu .current-menu-item > a {
    color: #5a604a;
}

.epik-sage .nav-primary .sub-menu a:hover,
.epik-sage .nav-secondary .sub-menu a:hover,
.epik-sage .site-header .sub-menu a:hover,
.epik-sage .site-header .genesis-nav-menu .sub-menu .current-menu-item > a,
.epik-sage .genesis-nav-menu .sub-menu .current-menu-item > a,
.epik-sage .genesis-nav-menu .sub-menu .current-menu-item > a:hover { 
	color: #4a6050;
}

.epik-sage h1 a,
.epik-sage h2 a {
	color: #333;
}

.epik-sage h1 a:hover,
.epik-sage h2 a:hover {
	color: #8f9779;
}

.epik-sage .head-wrap,
.epik-sage .welcome,
.epik-sage .home-feature-bg-dark,
.epik-sage .author-box,
.epik-sage .footer-widgets {
	background: #8f9779;
	color: #eee;
}

.epik-sage .head-wrap a,
.epik-sage .welcome a,
.epik-sage .home-feature-bg-dark a,
.epik-sage .author-box-title,
.epik-sage .author-box a,
.epik-sage .footer-widgets a {
	color: #fff;
}

.epik-sage .head-wrap p,
.epik-sage .welcome p,
.epik-sage .home-feature-bg-dark p,
.epik-sage .author-box p,
.epik-sage .footer-widgets p {
	color: #eee;
}

.epik-sage .archive-pagination li a:hover,
.epik-sage .archive-pagination li.active a {
	background: #8f9779;
}

.epik-sage .content .portfolio .more-link,
.epik-sage .plan-button a {
	background: #8f9779;
	color: #fff;
}

.epik-sage .content .portfolio .more-link:hover,
.epik-sage .plan-button a:hover {
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-webkit-transition: all .5s ease;
	opacity: .7;
	transition: all .5s ease;
}

.epik-sage button,
.epik-sage input[type="button"],
.epik-sage input[type="reset"],
.epik-sage input[type="submit"],
.epik-sage .sidebar .enews-widget input[type="submit"],
.epik-sage a.button.small,
.epik-sage a.button.medium,
.epik-sage a.button.large,
.epik-sage .circle {
	background: #8f9779;
}

.epik-sage .footer-widgets button,
.epik-sage .footer-widgets input[type="button"],
.epik-sage .footer-widgets input[type="reset"],
.epik-sage .footer-widgets .enews-widget input[type="submit"],
.epik-sage .footer-widgets a.button.small,
.epik-sage .footer-widgets a.button.medium,
.epik-sage .footer-widgets a.button.large,
.epik-sage .footer-widgets .circle {
	background: #111;
}

.epik-sage .enews-widget input:hover[type="submit"] {
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-webkit-transition: all .5s ease;
	opacity: .7;
	transition: all .5s ease;
}

.epik-sage .footer-widgets input[type="submit"] {
	background: #111;
}

.epik-sage .footer {
	background: #8f9779;
}
<!--formatted--><!--formatted-->

This gave me a new color scheme, added to the existing choices. I could have deleted or renamed “pink” since I would never use that (or purple).

Anyway, your site, when I changed just that padding, took out the white space.

The “View Mobile Site” at the bottom (when viewed on my Iphone) gives you a toggle between two different versions of the mobile website.

You have a plugin (Jetpack?) which is creating their version of a mobile site, so you have two available.

Selecting “View Full Site” gives you the normal mobile responsive Epik site view. There is some plugin not related to Epik which is giving you that extra feature. Looks like you should disable it as it’s not necessary with Epik.

If I blow my screen up to bigger than 140% the header logo is a bit fuzzy. The footer logo doesn’t do this. They are not pulling the same media file from your library?

On your website, right click, and a dialog box pops up. At the bottom is “inspect element”. Click that and you can see what is going on with a website. I prefer Firefox for this, but it also works in Chrome. The css shows up in the “inspection” windows, and you can change the code, colors, anything. The changes you make will vanish if you go to a different page or reload the window. This is a great way to “test” something (either finding a problem or trying a new color, or spacing, etc.). The changes do not affect the “real” website.

I just went to a different browser and loaded your website…it’s perfect. Your cache?

.css change line 2047 to “100%” you have it set at “360px” causing problem

add this:

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

and the logo will properly size on small screens

let me know if this worked!!

Sorry but it took a bit to find this.

I did see the logo image (Power Law) does not “fit” on the small screen size (does not reduce fully) and tried this:

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

This has worked for me, but something isn’t working for yours. Hummmm, still looking…