Hey Josue,

Yeah, not what I’m going for.
However, I really appreciate that you guys don’t assume anything. That you want to specifically get it to what the client wants. I do appreciate that.

So, let’s just start with the end in mind, instead of me just blindly giving you code that. at this point, seemed to have magically worked.

I want this as my desktop footer (auto size – scales to the size of the footer):

I want this as my mobile background (the globe image has half the opacity of the desktop globe image)

Again, previous thread was this: https://kriesi.at/support/topic/menu-footer-2/

I ended up with the code:

@media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}

.footer_color {
  background: #222222 url(https://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: auto;
}
}

• This reply was modified 8 years, 10 months ago by JC. Reason: Was trying to bolden the background size is 'auto'

Hi Josue,

Still no luck.

Is the answer in the old thread? Or was Enfold modified enough that the particular coding doesn’t work anymore?

Hey Josue,

There’s still nothing showing up in the footer when I use my original code. Even when I changed what you recommended. I’ve now added this to the Quick CSS and still not having any luck.

@media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}

.footer_color {
  background: #222222 url(https://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: contain;
}
}

Hey Elliott!

Thanks for suggesting that.

However, I remember trying this before (and I just retried it) but it doesn’t stretch properly to fit the entire footer background. Since there’s no way to stretch it, and only just tile it, it ends up looking dumb with a repeated image.

Thoughts?

Also, I wanted to add what I believe is my old Quick CSS code for this.

The result that it’s giving me is this:

Here’s that code (don’t know if it’s 100% complete):

.mc4wp-form form{margin:0!important;clear:both}
.mc4wp-form p br{display:none}
.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.mc4wp-form p{position:relative;clear:both;float:left;width:100%}
.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}
.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.mc4wp-form .first_form{clear:both;margin-left:0}

#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}

.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .mc4wp-form input[type=’text’],#top .mc4wp-form input[type=’email’],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}

Hey Josue,

Everything is working today. I’m guessing the host was up to something last night when I tried to submit to iTunes?

Thanks!

Go for it, Andy. Let me know what you find out.

Cheers

-JC

Sure. So I just want to move it up, like so:

But this is the result I get:

Want the background for the color section, not below it. Also, I want it to scale the image behind the form to scale to fit to the area.

Does that make sense? :)

Ismael,

Here’s a screenshot of my update page.

Awesome!

I’m assuming I can match that “red” with a hex value that I use for the rest of the site, correct?

Ideally I’d like something like this:

Also, what’s the code to change the color of the font and background color of just the tabs (not the entire header with the logo)? Similiar to what’s in the picture.

Thanks!

So is there anyway just to center the menu and the logo? I still feel there’s a lot of white space on the right of the page I’d like to do something about.

Hi Rikard,

Sorry about that. Should be good to go now!

Ah, I see. Yeah, I had done that in Quick CSS before. So yeah, probably adding that to the style.css is redundant… but it works with the new code you provided!

I also changed the background-size from cover to auto. Nice to have a little bit of that globe in there. :) (Since it is at auto… is it even needed now?)

With your guys’ help and going back to http://www.w3schools.com/ and using their “Try It” section… I’m learning – slowly!

Thanks Ismael!!

Whoa. “inside the media query”. Hopefully there’s a reference link in how to do this…

If not, I assume by adding the code inside the media query you mean to place the code in the grid.css file, correct?
Right after:

/*  #Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {

I did try placing it after this point but it didn’t do anything noticeable.

I’m using a child theme so, I don’t know how that changes things. Would I start another media query in the custom style.css or leave it in the parent?