Front Page the same as other pages?

OK I’ve made some progress, I’ve got the top image to look pretty much the same on the Front Page and the other pages. At this point, though, for some reason the page title does not show! Any help would be appreciated.

I was able to make it work by searching the CSS for items that were marked height=100% and changing them to a pixels. OK not very efficient, but it worked.

You’ll see at https://www.belleboats.com that the “Belle Boats” name does NOT appear at the top of the page (over the B&W image).

Also, there appears to be a kind of white “dashed line” right at the top of the page, it looks to be 1px. It only shows up on my Firefox (Win10), in a large browser window, it doesn’t show on my iPad.

Finally, on iPhone the content panel starts out down the page and you have to scroll up to show the “Belle Boats” title. This appears on the iPhone and also if I make my Firefox browser window small enough. Is this controlled by an @media switch?

I’m working on it, but any help would be appreciated!

• This reply was modified 7 years, 1 month ago by dangonn.
• This reply was modified 7 years, 1 month ago by dangonn.

More progress. By not using a Static Page for the home page, I was able to get close to what I wanted. Two snippets of code in these help forums stopped the Front Page from scrolling:

.background-fixed .panel-image {
background-attachment: fixed;
}

@media screen and (max-width: 480px) {
.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header { height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.custom-header-media,
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: static;
}

.custom-header-media:before {
background: none;
}

body.has-header-image .site-description,
body.has-header-video .site-description {
color: #fff; /* #222 */
opacity: 1;
}

So many thanks for that.

However, I’ve got other issues involving differing displays at different screen sizes. Should I start a new thread?? I’m a first-timer, not sure. Here goes:

–At iPhone size, the “Belle Boats” site name is a bit too low, how do I make it move up? Plus font is grey when I put in fff for color, how do I get it to show white?
–When you make the window bigger, the top image briefly gets shorter/thinner, then pops up wider (at 768px??), how to make the top image the same height in all screen sizes. I’ve put in 135px.
–at all sizes above iPhone size, the “Belle Boats” name disappears. How to get it back!

I’ll keep at it but help appreciated! It seems to have something to do with how the site specs different screen sizes.

A bit more progress, getting there! I got the site title to appear in larger PC screens…but it still doesn’t appear in iPhone size. In addition, if you resize the browser window in PC, the top image changes sizes a couple of time as you go from full-screen to iPhone-sized. Seems to be something about the @media triggers??

Based on various threads here at the forums, I put this in header.php:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

All the CSS changes I made are shown in the source of the file (I’ll transfer them to Child Theme CSS when done):

https://www.belleboats.com

Any help appreciated!

Reply to my other thread helped a lot with this.

https://www.ads-software.com/support/topic/firefox-edge-ie-vs-chrome-renders-css-differently/