Andykev

You might want to try the Genesis Visual Hook Guide plugin. It is really good at showing the containers, markup and so on with your Genesis theme.

Glad you found what you wanted.

<div class=”tp-bgimg defaultimg” style=”width: 100%; height: 100%; opacity: 1; visibility: inherit; z-index: 20; background-image: url(http://cdn7.jonathon.co/wp-content/uploads/portrait-photographers-in-edinburgh-1111.jpg); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;” src=”http://cdn7.jonathon.co/wp-content/uploads/portrait-photographers-in-edinburgh-1111.jpg”></div&gt;

The above code from your website seems to work. On my 27 inch monitor it fills the screen.

.header-image .site-title a {
float: left;
/* min-height: 117px; */
width: 100%;

}

The header image (logo) is in your css as shown above. Your min-height is commented out. That is why it showed the above dimensions. REMOVE the /* */ and it will be just fine. It’s in line 2061 of your CSS.

Your image is 360px X 32px. When you uploaded it to the Medial Library for your header image, did you forget to crop it properly? It should be sized 360 px X 164px.

Check the dimensions of your file image, and re-upload it. Should fix things nicely.

<div class=”one-half first”>I’m Jonathon and I live in Edinburgh with my wife and 3 children. I’ve been specialising in wedding photography in Edinburgh and Scotland since 2006. wedding photographer Edinburgh</div>
<div class=”one-half”>
</div>

Use “column classes” inside your widget. You must remember that each column is a percentage of the available space of that container (widget). So if it is a small box, you don’t want to divide it up more than necessary.

.post .meta, .pages .meta {
    display: none;
}

Those “gaps” are the margins. I am using a 27 inch monitor, not a laptop size or “17 inch” most computer people have. Thus, I get a very big picture.

Just like a “responsive” Theme (which yours is), if you make it small for an Ipad it adjusts the “fit” of the content, and conversely going “up” in screen size does the opposite. That is why you often find the images set to “100%” instead of a set width, like 1140px.

The “slider wide” has a bigger container than the regular “slider” area. You can place a wider image there and see how it looks.

On my website, I prefer the “margins” to basically frame the image.

This is a common question, and was covered in this thread:

<img class="aligncenter size-full wp-image-67" kasperskylab_antibanner="on" src="http://cdcri.katie.design/wp-content/uploads/2015/05/home-banner-with-text1.jpg" alt="home-banner-with-text" height="507" width="1567">

.slider-wide .wrap {
    max-width: 100%;
    margin: 0px auto -25px;
}

The top you need to change “aligncenter”. Your image is off to the left. The Slider wide margin, -25px seemed to work.

Updating WordPress does not wipe out your Theme .CSS custom settings. Updating the Theme can.

Here is a good read and tutorial on this. It is always said, BACK UP and BACK UP. I also copy the text of each page (the code) and save them as text files for each of my sites. I find it very convenient if I screw up a page and need to “cut and paste” the old back in. Sometimes it gets “lost” in the WP admin functionality. Peace of mind.

http://www.wpbeginner.com/wp-themes/how-to-update-a-wordpress-theme-without-losing-customization/

Don, Gray Boxes? Where? Do you have a link? There is CSS for all the colors..with a link we can look at your site and see what is going on. Thanks!

Perhaps they mean Home Page Template, “page_home.php”?

Epik has “home.php” as well.

Genesis has “header.php” and “page.php”. I WOULD NOT edit the Genesis core files. The Epik is a “child theme”.

I am unfamiliar with that plugin. But perhaps it should go into the Epik “FUNCTIONS.PHP” file.

Your code is this:
<img kasperskylab_antibanner="on" class="alignnone size-full wp-image-11" src="http://www.moodyriver.com/wp-content/uploads/2015/07/stonecircle.jpg" alt="stonecircle" height="440" width="100%">

When you insert the image into the textbox (which you put into this widget area), you should set the image to align center. Do this by using
<center><*YOUR IMAGE GOES HERE - LINK*></center>

The image is sized at 1140px. You need to use a much bigger image. Size it 1980px wide. You are asking that the image be “100%”..and it is making your image just that. However, your image is 1140px so at 100% that is what you get. Put the whopping big image in there, and at 100% it will fill the area.

Your image needs to go into the “Slider Wide” to easily make it full width. The regular slider is set at 1140px.

/* Slider Wide
--------------------------------------------- */

.slider-wide {	
    clear: both;
    width: 100%;
}

.slider-wide .wrap {
    margin: 0 auto 20px;
    padding: 30px 0 0;
    max-width: 100%;	
}

.slider-wide .widget {
	margin: 0 0 20px;
}

.slider-wide .flexslider .slides img {
	width: 100% !important;
}

.slider-wide .flexslider {
	max-width: 100% !important;
}

/* Slider
--------------------------------------------- */

.slider {	
    clear: both;
}

.slider .wrap {
    margin: 0 auto 20px;
    padding: 0;
    width: 1140px;	
}

.slider .widget {
	margin: 0 0 20px;
}

See the part where .slider .wrap { ..shows the width:1140px.? The slider wide is max-width: 100%; which means it takes a full width image.

I use the Black Studio Tiny MCE widget plugin. It allows you to edit inside any widget by using a “Visual Editor”, just like any post or page edit. Much easier than the “text” alone.

So insert an image into the SLIDER WIDE widget with dimensions of width 100% and height to suit you.

Try this:

.welcome-features .wrap {
    margin: 0px auto;
    overflow: hidden;
    padding: 0px 0px 0px;
    width: 1140px;

Sorry, I did it here too…

/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #333;
	font-family: 'Comic Sans MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	margin-bottom: 16px;
	padding: 0;
}

https://appfinite.com/topic/a-showcase-for-epik/

It’s within this thread. A “showcase” is being planned.

And you have this set as well”

body.custom-background { background-image: none;}

I just saw you wanted an image, which you can do instead of color. The code is similar:

body.page-id-XX {
 background: url("/wp-content/themes/yourTheme/path-to-image/image.png") !important;
}

Substitute the “XX” for the page ID for your selected page. The URL path is for the image you wish to use for the background. Make sure that is is properly formatted and optimized.

You need to add the page ID.

body.page-id-4 {
    background-color: #FF0000 !important;
}

You add this code to your CSS file. The Page ID can be found on the page you want, by clicking the “GET SHORTCODE” as an easy way..it’s the number which follows your URL/-XX

Have fun!

Robert, I placed the above code in your CSS and it solved the header responsiveness for the smaller Iphone screens. I looked for something about the menu, but can’t find it. Did some code get removed from the original CSS? The menu is disappearing “on schedule” when the screen shrinks but the menu “hamburger” icon is not there.

Are you sure you put the content widget into the correct area? If you have not seen the widget guide: https://appfinite.com/topic/optimal-widgets-location/

Your site looks perfect otherwise.

The only thing I noticed is your Logo is cut off at the top. Did you adjust padding at the top for the header?

Did you check “Appearance – Customize” “Site Title & Tagline” from dashboard and uncheck DISPLAY HEADER TEXT. Then clear any cache on site or on your browser and refresh.

Also the Header Image is showing in customization?

I had a confirmed “mobile friendly” responsive theme FAIL the new Google Mobile Friendly test. Stumped. Then I realized that I had used a couple security plugins (Wordfence, All in One WP Security) and the .htaccess file had been changed which did not allow Google to properly crawl the site. Deleted the offending stuff and it suddenly PASSED.