Advertainment block problem with display on ipad

Hi

Could you take a look at the demo site of this JM Summer theme? http://jm-summer.demo.joomlart.com/

It looks the same like demo site.

If you want to modify this, send me some screenshots of how you want to achieve, I will suggest you further.

Hello, thanks for the reply. I’m not sure how I want it to look, I will have a think and come back if that’s OK?

I see the demo is the same as my site on a tablet, but it just looks wrong to me. All the random empty space doesn’t look right.

Thanks again

Hello again,

I have amended the css for the advertainment block and it now displays the same on computer and tablet screen.
I did this by changing pixel dimensions to percentages.

There is one small anomaly I can’t seem to get past though.

I have attached screenshots of how it now looks on an ipad and also my code amendments.

(Ignore the comments -- 33.33% is the figure I used)

There is a 1 pixel line around the right hand image on the ipad, not on the computer display.

I have played with tweaking the widths slightly but if I correct it on the ipad it goes wrong on the computer.

Can you see any way I could overcome this?

Ideally I would like it to fall nicely on both devices but as a last resort could I change the background underlying block to white? or remove it altogether?

Many thanks

Wayne

Could you highlight that 1px line so that I can take a look? as I can see that it looks the same in iPad and computer now.

Hello

I have arrowed it on the screenshot I attached.

It is present on both of my ipads

Also, just to clarify, the one pixel line is a one pixel gap, allowing the underlying orange block to show through.

To get the fix, you can edit file /skin/frontend/default/jm_summer/css/styles.css, at line 2611 replace this rule:

Code:

.list-advertainment ul {
    background: #f67252;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

With:

Code:

.list-advertainment ul {
    background: none !important;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

Hope this helps.

Yes that works. Still a 1px gap on the ipad but now it is white.

I’m happy with that.

Thank you

Good work Rugshopdirect,

Changed as shown in your post, and like you said it’s perfect now on a iPad.

Thanks for sharing,

Rain…