Rich-text Reply

Test displaying wrong on mobile

elburnso 06-14-16

Test displaying wrong on mobile

Hi

I was hoping someone could help me please. I have setup a test to test the positioning of the upsells on my website. The test works fine on desktop but once we try it in mobile the page display is all off. See links to the variations below.

 

https://www.oneills.com/derry-gaa-carron-half-zip-training-top.html?optimizely_x6174181732=1

 

https://www.oneills.com/derry-gaa-carron-half-zip-training-top.html?

 

Would anyone be able to help me in fixing this?  The website is a mobile responsive site

Thanks

Declan

Website Manager
Level 4

CouchPsycho 06-15-16
 

Re: Test displaying wrong on mobile

Am i right: You are talking about the "we recommend"-part?

 

  1. Your div.box-collateral.box-up-sell is set to 600px width, maybe 100% is the better choice.
  2. Your items within the slider have also a px-width;

Maybe this is a hint, but since you are using a slider-plugin(?) it is hard to say, where the wrong widths are set.

 

Greetings




"the essence of the creative act is to see the familiar as strange." (anonymous)
elburnso 06-15-16
 

Re: Test displaying wrong on mobile

Yeah its the we recommend part. I want it to sit to the left of the "also available in" box and adding the widths in was the only we I could get it to slot in beside it.

 

It's a magento enterprise site and its just using the standard upsell feature that comes with it. See updated url below with the widths removed. The we recommend box now shows in the next line down. I tried setting the widths to 100% also but it provides the same result as below.

 

https://www.oneills.com/derry-gaa-carron-half-zip-training-top.html?optimizely_x6174181732=1

Website Manager
Level 4
CouchPsycho 06-16-16
 

Re: Test displaying wrong on mobile

Hi,

 

ich checked your link and the "we recommend"-part looks good. Have you done anything else? Is this thread still active or did you find a solution?

 

If the current state is not what you wish to see, maybe a commented screenshot is helpful for me to understand your vision of the layout...

 

Kind regards, Michael




"the essence of the creative act is to see the familiar as strange." (anonymous)
elburnso 06-16-16
 

Re: Test displaying wrong on mobile

derry-example.jpg

 

No still have problem but sorry should have said when I remove the widths the test displays correctly on mobile but wrong in desktop. The we recommend box drops down below the also available in box. Any ideas?

Website Manager
Level 4
CouchPsycho 06-16-16
 

Re: Test displaying wrong on mobile

Ok, to place it there it should have 60% like the element above it. Due to the slider-Javascript i cannot check function, but 60% is the right size for desktop.

 

I see some media-queries in your styles-definitions, e.g.

 

@media only screen and (max-width: 767px) and (min-width: 240px)
.product-image-gallery {
    width: 100%;
}

i suppose, your main-breakpoint is at max-767px. You need to use these breakpoints, too. How do you set the styles? With the editor?

 

It might be better to add some style-definitions in the editor window like this

 

@media only screen and (max-width: 767px) and (min-width: 240px)
{
  .box-collateral.box-up-sell
  {
    width: 100%;
  }
}

@media only screen and (min-width: 768px)
{
  .box-collateral.box-up-sell
  {
    width: 60%;
  }
}


To add this in the variation js-editor do the following:

 

jQuery("body").prepend("<style>@media only screen and (max-width: 767px) and (min-width: 240px) {  .box-collateral.box-up-sell  {  width: 100%;  } } @media only screen and (min-width: 768px) {  .box-collateral.box-up-sell  {     width: 60%;   } }</style>");

 

No line breaks allowed ;-) Might be some "!important"'s necessary... 

 

Give it a try

 

ps: checking is very complicated for me due to the fact that your slider-js does some modifications....




"the essence of the creative act is to see the familiar as strange." (anonymous)
elburnso 06-16-16
 

Re: Test displaying wrong on mobile

Brilliant, tahnk for all your help on this. Yeah that has seemed to have fixed it although if there is a few products in the we recommend box the products are overlapping.

 

https://www.oneills.com/derry-gaa-carron-half-zip-training-top.html?optimizely_x6174181732=1

 

https://www.oneills.com/all-ireland-hurling-stress-ball-purple.html?optimizely_x6174181732=1

Website Manager
Level 4
CouchPsycho 06-16-16
 

Re: Test displaying wrong on mobile

I had a look: The width of these elements is set whenever sliding takes place etc. their width is set back to its initial value. Since i do not know your site and the slider, i have no idea how to fix that. All my tries failed after the first slide-click.

 

i am sorry :-(




"the essence of the creative act is to see the familiar as strange." (anonymous)