Adjusting title for Project page

[applemint]

Hi,

My project (post) pages are made with the “Gallery on Right” Layout Template.

I like how it looks, but it comes with a few limitations. I need a new project page that allows me to match sections of the text on the left with the images on the right. So I am trying to create a project page with a Gallery Format, but made with “Page Builder” instead, which allows for images to match up with certain text blocks.

Though this causes two new issues.
1. It adds an extra title, above my chosen title. How to remove this?
2. The title I create in the Page Builder does not look like the one that comes with the “Gallery on Right page”. How to match the title (both for desktop/tablet/mobile views)?

Please see next message with links and screenshots.

Thank you!
Regards!

[applemint]

This reply has been marked as private.

[SeaTheme]

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:
(You need to replace the id-xxxx, xxxx is post id number, 2914 is sentient-salon-2’s post id, you can find the post id by the guide)

body.single.postid-2914 .title-wrap,
body.single.postid-xxxx .title-wrap,
body.single.postid-xxxx .title-wrap {
    display: none; 
}
.single-format-gallery .text_block h3 {
   font-size: 34px;
       background-attachment: fixed;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: 50% 50%;
    background-image: url(https://www.hannasatterlee.com/wp-content/uploads/2022/06/sentient-salon1.jpg);
}
@media (max-width: 767px) { 
    responsive-ux.single-format-gallery .pagebuilder-wrap > .container-fluid {
    padding-left: 0; padding-right: 0;
   }
  .single-format-gallery .text_block h3 {
   font-size: 34px; margin-top: 35px;
  }
}
@media (min-width: 768px)
   body.single.single-format-gallery .fullwrap-layout-inn .pagebuilder-wrap > .container-fluid {  width: 700px; }
}
@media (min-width: 992px) {
body.single.single-format-gallery .fullwrap-layout-inn .pagebuilder-wrap > .container-fluid {
    width: 930px; }
}
@media (min-width: 1200px) {
  body.single.single-format-gallery .fullwrap-layout-inn .pagebuilder-wrap > .container-fluid {
    width: 1130px; padding-left: 0px;
    padding-right: 0px;
 }
}
@media (min-width: 768px) and (max-width:992px) {
#navi-header>div>ul>li {
    margin-left: 15px; 
 }
 #navi-header a {
    font-size: 16px;
 }
  .logo-image { 
    height: 40px;
  }
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[applemint]

Thank you very much. I would not have found this on my own.

1. The code: -webkit-text-fill-color: transparent; shows up partially in red in customizer. Does this mean there is an error in it?

2. The 50% 50% for background-position of the feature image for Title Text Masking doesn’t work out the same as it does in the “Gallery on Right” Format. I’ve adjusted to 80% 10%, but it’s a bit of a fiddle to get the text readable at all media sizes.

3. The last code for #navi-header and logo-image, is that code targeting all webpages of the specified width sizes?

4. Viewing the title on my mobile (both in Chrome and Firefox browser apps), shows smaller than a page constructed in the “Gallery on Right” Format. However, in the Customizer mobile view, it shows the title in correct size. (I will send screenshots to clarify)

[applemint]

This reply has been marked as private.

[SeaTheme]

This reply has been marked as private.

[applemint]

2. Thank you for the tip. It gave me the idea to crop out the too light parts of a copy of the feature image and use it solely for the title masking, so that the title will be readable in every position.

3. Thank you. I made the logo height a little larger than your suggestion, as I find 40px too small. Is this causing the following issue?
For 976px-1070px, and 751px-831px ( I might be a few pixels off) the logo jumps down, and sits on top of the title.

Thank you,
Regards

[SeaTheme]

3, yes, it is.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Author]

Posts