Same page, same CSS...different results

dblistowel

Hi,

I'm at my wit's end with this, on my wordpress site I have page A linked below for which everything is working responsively on an Ipad - the links background is aligning on laptop screen size, Ipad landscape and portrait size, perfect.

Link B is the same page except for the text content, it's using exactly the same CSS - I have basically recreated the working page A from scratch YET, SOMEHOW, the background image for the links looks to have shrunk (it's exactly the same image (checked url) with identical CSS applied to it, but this is still happening.

PS Background image is the width of page not width of element.

Can anyone tell me why page B is not displaying the same as page A, HELP !

PAGE A:

http://dbtest.destinationballybunion.ie/?page_id=1725

PAGE B:

http://dbtest.destinationballybunion.ie/?page_id=1779


CSS APPLIED TO BOTH PAGES:

[HTML]
#container {
margin: 0%;
}

#container text area {
margin: 5%;
}

wrapper {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

entry {
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
padding: 0px;
}

entry-header.style {
position: absolute;
left: -9999px;
}

.entry-title {
display:none;
}

.entry-content a img,
#attachment-nav a img {
max-width: 98.5%;
padding: 0%;
box-shadow:0 0 3px #EEE;
background:#FFF;
border:#EEE 1px solid;
}

.single .entry, .page .entry, .error404 .entry {
margin-bottom: 5.1% !important;
padding: 0;
}

#access {
background: none repeat scroll 0 0 #111111;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
padding: 0 20px;
}

#site-title {
height:100%;
width:100%;
}

#site-title, #site-description {
line-height: 100%;
}

#site-title {
margin: 0 0;
}

#site-title img {
margin: 0;
}

#site-title img {
padding: 0;
}

.background {
background-image:url("http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03/TR-FULL-BACKGROUND-2-MERGED.jpg");
background-repeat:no-repeat;
background-size:contain;
}

h1 {
margin-left:3%;
padding:5px;
}

h1 {
margin-bottom:0.2%;
padding-right:10%;
}

h1 {
font-size: 50.0vw;
}
h2 {
font-size: 2.8vw;
}
h3 {
font-size: 2.3vw;
}
h4 {
font-size: 2.0vh;
}
h5 {
font-size: 1.5vw;
}
h6 {
font-size: 1.0vh;
}

p{
margin-left: 3%;
}
[/HTML]

Gordon

I don't have much time to check this, but the image is contained within this div on the page:
<div class="wpb_row vc_row-fluid background" style="background-image: url(http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03/TR-FULL-BACKGROUND-2-MERGED.jpg);">

Maybe there's a wordpress class that fluidly changes the background image size somehow?

Incidentally, it's not just the text that's different on those pages, you've also got different images:
http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/02/FRONT-TEAR-1-CROP.gif
http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03/TEAR-NEWEST-HALF.gif

They are both slightly different sizes, it might be worthwhile making the sizes the exact same, just to see if that changes things, and also for consistency.

Fenster

Why not use a custom @font-family for those links?

dblistowel

Gordon wrote: »

I don't have much time to check this, but the image is contained within this div on the page:
<div class="wpb_row vc_row-fluid background" style="background-image: url(http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03/TR-FULL-BACKGROUND-2-MERGED.jpg);">

Maybe there's a wordpress class that fluidly changes the background image size somehow?

Incidentally, it's not just the text that's different on those pages, you've also got different images:
http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/02/FRONT-TEAR-1-CROP.gif
http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03/TEAR-NEWEST-HALF.gif

They are both slightly different sizes, it might be worthwhile making the sizes the exact same, just to see if that changes things, and also for consistency.

I have an extra class for each page titled 'background' that that div class refers to. Into that extra class I've added the following properties:

[HTML]
.background {
background-image:url("http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03/TR-FULL-BACKGROUND-2-MERGED.jpg");
background-repeat:no-repeat;
background-size:contain;
}
[/HTML]These classes apply to the links background image on both pages but with different results for some reason.

They are both slightly different sizes, it might be worthwhile making the sizes the exact same, just to see if that changes things, and also for consistency.

You're right there was a difference in image size there but I've now got both at equal sizes and the mis-aligned/shrunken background is still there.:(

dblistowel

Fenster wrote: »

Why not use a custom @font-family for those links?

I was going to do that but I thought the font used went better with the background effect.

Gordon

I've never used background-size: contain before, does that scale the image depending on the div size?

dblistowel

Gordon wrote: »

I've never used background-size: contain before, does that scale the image depending on the div size?

It's the first I've used it myself - I'm new enough to working with CSS - but yeah, my understanding of it is that the whole background image is used but to a scaled size which sounded perfect for making a responsive web page.

Fenster

I am unsure why the background image is off, but a quick fix would be to cut out the "man" from this background image and attach it to the specific div.

Rather than a specific background image attached to a specific div, you have a general background image on which the divs are loosely overlaid. This scales badly (think responsiveness) and is indicative of top-down design. You also have things like the main divs border shadow handled by the background image. Net effect is that your site's appearance will break easily if the page is resized.

TL;DR: It could be one of several things. I don't know what the cause might be, and I'm not in the mood to debug CSS at 2am, but one fix is for you to slice up the background image.

dblistowel

Fenster wrote: »

I am unsure why the background image is off, but a quick fix would be to cut out the "man" from this background image and attach it to the specific div.

Rather than a specific background image attached to a specific div, you have a general background image on which the divs are loosely overlaid. This scales badly (think responsiveness) and is indicative of top-down design. You also have things like the main divs border shadow handled by the background image. Net effect is that your site's appearance will break easily if the page is resized.

I think I get what you're saying. I'm building this website through Wordpress and through a drag and drop extension called Visual Composer. The page is laid out in rows and columns and what I wanted to do was attach the background image to the sidebar column only but was unsure how to do this cleanly.

The only access, as far as html and css is concerned, to this sidebar column - via Visual Composer - is through an option that allows you to apply an extra class to the column.

So, is it possible to attach a background image through applying a class to the specific sidebar column. Wouldn't the background image have to be attached directly through the html too - in Wordpress/Visual Composer the access to html route looks a little dodgy to someone new to using it (Site crashed last time I tried it). Thanks.

Nemeses

What theme is it that you are using in WP?

Does the same thing happen if you used the standard Twenty Fourteen... (with customisation in CSS / Background etc)

I've tried looking at both links you put up... I Honestly can't see what is the issue is clearly other than the background image is not filling the actual background and a few quirks with Spanning the Sub header titles.

..Bear in mind that I am viewing your site at 2560x1440 Resolution....

Would you mind screenshooting and highlighting the area you are getting stuck with - I seem to be having a derp moment working out what the issue is you are having..

dblistowel

What theme is it that you are using in WP?

I'm using a Pinboard child theme. With this I'm using a drag and drop extension called Visual Composer. This allows you to lay the page out in rows and columns - usually you have an option to apply a background image to a row and so attach it to the containing div. So within the text content and sidebar row, as such I've applied the following layout:

1/12 + 4/12 + 6/12 + 1/12

It's the 4/12 section of this row the links sit in and to which I've nested a row within a row, in the hope that, because you can usually add a background image to a row I could then apply the background image to this nested row - where the links are. For this nested column however Visual Composer only gives the option to add an extra class. The only option to add a background image therefore was in the page wide text content and sidebar row or div - so I've had to apply the background right across the links and the main text area.

Does the same thing happen if you used the standard Twenty Fourteen... (with customisation in CSS / Background etc)

I'm using a Pinboard child theme, would this be safe to do ?

Would you mind screenshooting and highlighting the area you are getting stuck with

Here are the two screenshots, I've also included a screenshot of Visual Composer with the rows and columns as I have them laid out for this part of the page

As Fenster pointed out -and what I would like to do - is to be able to add the background image to the specific div that contains the text links, this would be a much tidier way to do this. But as the only access to html and css I have to this div is via adding an extra class (only option available on Visual Composer), could the background image be added to this div by applying a class to it ? Thanks.

Fenster

dblistowel wrote: »

I think I get what you're saying. I'm building this website through Wordpress and through a drag and drop extension called Visual Composer.

And there's your problem. You don't know what your code does, since you only access it through an intermediary. How capable are you of hand-coding a site, or are you just using this for time's sake?

dblistowel wrote: »

So, is it possible to attach a background image through applying a class to the specific sidebar column.

Yeah.

.foo {
    background: url('path/to/file.jpg') no-repeat center center;
    background-size: 100% 100%;
}

dblistowel

Fenster wrote: »

And there's your problem. You don't know what your code does, since you only access it through an intermediary. How capable are you of hand-coding a site, or are you just using this for time's sake?

This is it exactly. Though I'd feel comfortable enough with html and css I'm still fresh enough with putting the theory into practice so that's why I decided to use Visual Composer - this and the fact that I was working to a deadline with it. But yeah, the next one I'm doing I think I'll just try coding it myself.

For the mis-aligned/shrunken background problem I tried changing the css property:

 background-size: contain;

to:

 background-size: 100% auto;

and this seems to have fixed the problem, but I'll give this a try,

.foo {
    background: url('path/to/file.jpg') no-repeat center center;
    background-size: 100% 100%;
}

thanks again