[Bianca]

Hi Carl,
Sorry, I overlooked that it was a mobile issue. This might help to center the box.
Replace this:
margin: 10px;

with this:
margin: 10px auto;

When you add just one value it applies this for all sides top - right - bottom - left. When you add two values, the first applies vertically (top and bottom) and the second value applies horizontally (right and left). The auto value makes it align in the middle of the section. More information about this can be read here.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi there,
If you find this CSS bit in the stylesheet

.content-sidebar-wrap {
	max-width: 1200px;
	margin: 0 auto 120px;
	position: relative;
	z-index: 98;
}

The 120px leaves the margin at the bottom. You can either remove it then this should resolve the issue for the front page. However this also removes the white space on the other pages so you might want to leave the code above as is and just add this one below it:

.home .content-sidebar-wrap {
	max-width: 1200px;
	margin: 0 auto 0;
	position: relative;
	z-index: 98;
}

This only affects the frontpage

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi Carl,
What do you mean exactly? When I visit your website I see the box properly aligned. However, I do see that the text in the box is left aligned. Is this what you mean? If so addtext-align:center; to the code you mention above.
If not, can you clarify?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi there,
It's hard to say. Have you tried disabling all plugins?

You can try to find this CSS in the database or within the files. But if you did not put it there, the interesting thing to know would be, what happened?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Thanks Anita, I suspected something like that.
Especially since I see some entities spamming the forum with irrelevant bogus. Must be annoying to moderate.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi there,

The width for the full width content is stored in this bit of CSS:

.full-width-content .content {
	padding: 0 200px 50px;
	width: 100%;
}

Change the 200px to 100px or even less to make the content wider. However if you are planning to use take advantage of the block editor this might not be the best option as it skews the 'wide' settings of the block editor a bit.

Alternatively you can also use group block and set it to wide or use it in conjunction with Genesis Blocks for even more advanced functions.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi there,
Looks like the problem is with the colors of the sub menu.
If you take a look at the style.css at line 2218 the color of the toggle is set to #474740.

.menu-toggle,
.sub-menu-toggle {
border-width: 0;
		color: #474740; /*ADUNATE was #000*/
		display: block;
		font-family: "Open Sans", sans-serif; /*ADUNATE was Muli*/
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		visibility: visible;
		width: auto;
	}

Because of that you are not able to see the toggle arrow to for the sub navigation on a mobile.

Same goes for line 2323.

.genesis-responsive-menu.nav-primary .genesis-nav-menu .sub-menu a {
		color: #474740; /*ADUNATE was #000*/
	}

So basically check all the elements that are set to #474740 if the problem persists. Goodluck.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Enter this CSS in the customizer or change it directly in the child theme:

.site-header {
background-color: #000; /* insert the hex color of your brand */
}

Here is a link to a hex color picker if needed, however I guess you have a brand guide where the hex code is already defined.

You probably also need to change the color of the text

.site-title a,
.site-title a:hover,
.site-title a:focus,
.genesis-nav-menu a {
	color: #fff; /* insert the hex color you want the text to be */
}

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

I'm not sure it will be efficient in terms of "code cleanness" to put this into additional CSS. What do you think?

It is definitely not an elegant solution, that's why I called it a work around.

When you activate a different theme all settings from another theme should disappear. The only thing I can imagine when it doesn't has to do with server caching. I'm not sure if it's the case here but you can look into that.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Note: On the second screen you send I see that the logo is not set as a current header. https://prnt.sc/vc7buq. Could you try to see what happens when you apply one?

Unfortunately there is no option to update a child theme through the WP dashboard.This article explains why.

If StudioPress isn't able to help you out, you could consider buying an extra license for the theme. I see that a lot of the CSS customizations were applied through the customizer so it will be easy to port those when replacing the child theme (always back-up). However I can't tell if other files in the child theme have been modified or not.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Awesome

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Ok one more shot. I was able to reproduce the not centering.
This code validates (meaning the customizer accepting the html) and centers the text.

<div class="my-table">
	
<table>
  <tr>
  <td class="td-first" width="240"><span>Brands TRUST Music</span></td>
  </tr>
</table>
 <table>
  <tr>
    <td class="td-second"><img title="DJ mix playlists" src="https://djcarl.com/animations/corporate-1.gif" width="110" height="90"></td>
    <td class="td-third"><img title="Emcee hosting" src="https://djcarl.com/animations/corporate-2.gif" width="110" height="90"></td>
  </tr>
  <tr>
    <td class="td-fourth"><img title="Music marketing consulting" src="https://djcarl.com/animations/corporate-3.gif" width="110" height="90"></td>
    <td class="td-fifth"><img title="Event and project management" src="https://djcarl.com/animations/corporate-4.gif"></td>
  </tr>
  </table>
  <table>
   <tr>
  <td class="td-sixth" width="240"><span>Expert DJ Carl©</span></td>
  </tr>
  </table>
</div>

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Can you try this?
Replace

.td-first,
.td-sixth {
	background-color:#B0C4DE;
}

with

td-first,
.td-sixth {
	background-color:#B0C4DE;
	text-align:center;
}

or add

.td-first span,
.td-sixth span{
	text-align:center;
}

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
As I don't use this theme this is a bit of a long shot. However I did a quick install of two versions of the theme, the one you use 3.1.2. and the latest version 3.2.3

The logo on the older version looked distorted in combination with the latest Genesis version, but the latest theme version (3.2.3) seems to look fine. Not sure if it helps, but updating the theme to the latest version can be a solution if you did not make too many customizations to the theme.

The change log shows that there have been made some changes on the logo appearance in version 3.2.0 and on the navigation on 3.2.3. So checking the CSS and adjusting accordingly can also help.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi there,
Can you elaborate on what steps you took exactly? Do the images show up on general blog (if there is any)? Did you follow these steps or was it a different approach?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

You're welcome.
Looks ok to me. Is the text ok now?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Thanks Andrew and Anita 🙂

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
How transparent would you like the navigation?
In the CSS it's the .site-header and .site-header.dark elements where the background information is put.
Set background-color:none if you don't wish a background color.Or if you want to make it a bit transparent then use background-color: rgba(0,0,0,0.7);

Here is an article that explains more about the usage of rgba in CSS.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Still a clunky solution but you can accomplish this by adding media queries to the CSS (minimum screen size and maximum screen size).

#breakthrough-page-title .full-width-image {
	background-color:#2571a8;
	max-height:309px
}

#breakthrough-page-title .full-width-image img {
	opacity:0.75;
	background-size:cover
}

@media screen and (min-width: 600px) and (max-width: 740px) {
#breakthrough-page-title 	.full-width-image {
	max-height:170px!important
}

}

@media screen and (min-width: 741px) and (max-width: 1235px) {
#breakthrough-page-title 	.full-width-image {
	max-height:180px!important
}

}

I also added an ID to prevent the styles being assigned to other elements. Change this according to preference.

I'm afraid I don't have any more ideas why the SVG filter method isn't working properly. Before the styling elements were absent in the source code, but now they are in place. Beats me.

Personally I would check this in a different environment, possibly with a clean install and watch step for step what happens.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

There is a work around but might needs some additional polishing

.full-width-image {
	background-color:#f00;
	max-height:365px
}

.full-width-image img {
	opacity:0.6;
	background-size:cover
}

Change the color and opacity rate. It also leaves a space at the bottom

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Author]

Posts