White Box Background & Different Browsers

So, the second part of my question is dumb. I didn’t realize that the different look was just because I was was zoomed in to 150% on google chrome and not the other browsers.

So I guess if I were to now update my situation, i’d now be wondering if I could have Customizr change the default zoom to 150% for my website. That way regardless of who’s viewing it and regardless of the browser, my site will always look the same. I like the zoomed in(150%) look so I’d rather have it scale to that if I could.

THANKS AGAIN!

Not recommended here

Thank you for the response!

Is there perhaps another solution to similarly scale my content as it looks when 150%? I’m new to customizr and thinking outside the box is a limited skill as of now.

For a sitewide change to font-size, try:

body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1.5em; /* Adjust */
  line-height: 1.7em;
}

If too much, you’ll need to identify which items you want to resize.

I want to scale everything. Since you said that zooming is not recommended I was hoping there would be another method of achieving the same effect.

Did you see the link to CSS Transforms?. The Scale property should help.

I’ve got my website at a level where I’m happy with the zoom now. I used the code:

body
{
zoom: 1.5;
-moz-transform: scale(1.5);
-moz-transform-origin: top left;
width: -moz-max-content
}

That code works perfectly with all browsers except firefox. It looks pretty good on firefox though, the header and footers are just cut a little short. Acceptable for now. If anyone has any solutions that’d be cool.
____

I messed around with scaling and got the dimensions perfect too. There is a major downside to the scaling function however. The drawback is, if you have dynamic images(featured images in customizr), you’ll get a flickering effect that causes your website to blur. I believe this has something to constantly resizing your images thus screwing with the resolution.

That’s why I decided to use the code pasted above.

____

I appreciate all you help so far rdellconsulting. You’ve been great! I was wondering if you’d mind going and answering the first part of my original question?

(question rephrased)Can I set borders around the white boxes that encapsulate the featured images?

For the “white boxes” you could try these in your child theme’s stylesheet or custom css:

If you want to change the color of the white boxes:
.marketing .round-div { border-color: red; }

If you want a border around the white boxes:
.marketing .thumb-wrapper { border: 2px solid red; }

Naturally, choose whatever color you want.

Wow! Thats so cool! Thank you! Is that possible to have a different border colour for each featured image?

.fp-one .thumb-wrapper {
border: 2px solid red;
}
.fp-two .thumb-wrapper {
border: 2px solid green;
}
.fp-three .thumb-wrapper {
border: 2px solid blue;
}

Thanks for all your help guys but my problem with the websites is still unresolved. The website looks absolutely fantastic on my browsers but doesn’t hold up on other computers. I’m not sure why. It usually has to do with the width being messed up.

https://brylecuff.com/

This is the code I’m using.

#bg {
  position: fixed;
  top: 0;
  left: 0; 

}

body {
  background: url("https://i263.photobucket.com/albums/ii151/CUFF3R/Background1-7.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body
{
zoom: 1.5;
-moz-transform: scale(1.5);
-moz-transform-origin: top left;
width: -moz-max-content
}

Looks OK in FF, Chrome & Safari but not in IE11.

blue.css is creating:

.container {
margin-left: auto;
margin-right: auto;
}

Can you try to override that first.

Not sure what the #bg code is achieving, esp the position: fixed? What happens if you remove it? (I can see what you think it would do). I’ve not done that when using background images.

The is now down to this…

body {
  background: url("https://i263.photobucket.com/albums/ii151/CUFF3R/Background1-7.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body
{
zoom: 1.5;
-moz-transform: scale(1.5);
-moz-transform-origin: top left;
width: -moz-max-content
}

I removed the other lines because they weren’t doing anything. I still don’t have any clue what to do though. I just want the dimensions to stay as I like them on every monitor.

Interesting exercise! Having inspected code in IE, it’s the body{zoom: 1.5;} that IE is treating differently to the other browsers.

Other than adjusting other elements which will screw the other browsers, then not sure how to handle it ??

Try this