avonlee_resp Mobile access is missing prices

**DarkAngel** · 22 Aug 2016, 07:54 AM

When we first added this theme we had problems getting it to behave but finally won and it did what it was supposed to do...LOL

I checked it both online and on mobile phone and we had prices (I just can't remember exactly where) and we had the description area in the description drop area of product page...I think the prices were in the details drop area.

No idea when but now details only drops then closes right away but description works fine.

link: all products are affected on mobile phone

Code:

https://www.designerperfumesnob.com/womens-perfume/Oscar-de-la-Renta/Oscar/EDT/3.4oz

template is: Responsive Avonlee Contempo (not sure if it is misbehaving or if something got turned off in admin area by accident)

Store is not affected at all, all information for product info shows up. Ideas??

**mc12345678** · 22 Aug 2016, 02:10 PM

I'm unable to easily see the css related to this in mobile view, but more than the price is missing from display of the information. Right now there is no add-to-cart button/option available.

I can though see the source, and the price and add-to-cart information is in the source. This leads me to believe that you have css to hide everything that is within the following code block by reference to the id of cart:

Code:

<div id="cart">
<!--bof free ship icon  -->
<div id="freeShippingIcon"><img src="includes/templates/avonlee_resp/images/always-free-shipping.gif" alt="Always Free U.S. Shipping" title=" Always Free U.S. Shipping " width="250" height="106" /></div>
<!--eof free ship icon  -->


<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
$34.88</h2>
<!--eof Product Price block -->



<!--bof Attributes Module -->
<!--eof Attributes Module -->



<!--bof Add to Cart Box -->
                  <div id="cartAdd">
    Add to Bag: <input type="text" name="cart_quantity" value="1" maxlength="6" size="4" /><br /><br /><input type="hidden" name="products_id" value="1974" /><input class="cssButton submit_button button  button_in_cart" onmouseover="this.className='cssButtonHover  button_in_cart button_in_cartHover'" onmouseout="this.className='cssButton submit_button button  button_in_cart'" type="submit" value="Add to Bag" />          </div>
  <!--eof Add to Cart Box-->
</div>

**RixStix** · 22 Aug 2016, 03:39 PM

The price is there on my phone...
but you must "Scroll right"

The page width seems to be twice as wide as my phone screen and it is really hard to see (and grab) the horizontal scroll bar.

**mc12345678** · 22 Aug 2016, 09:40 PM

Originally Posted by RixStix

The price is there on my phone...
but you must "Scroll right"

The page width seems to be twice as wide as my phone screen and it is really hard to see (and grab) the horizontal scroll bar.

Good catch. Yup, there it was off to the right outside of the expected right margin. Wondered what was holding the vertical white space. Now, what needs to be done about it is the next question. :)

**DarkAngel** · 23 Aug 2016, 03:15 AM

thank you both...no idea what happened. I know that which is to the right used to show under the image, although the enormous white space has always been there.

I know not enough to mess with the css coding for the mobile stuff and also not sure if the being off to the right is governed by the normal store css file.

but at least for now her pricing does show. Yes how to fix it is the next question...I am at my wits end and leaving the responsive templates as is is not an option for the owner --can't blame her not wanting to be in the cookie cutter group...LOL

Ideas of what to try...sorry for delay in getting back here, it has been a super busy day and just now got a chance to get on.

**traytray** · 29 Aug 2016, 12:01 AM

What happened was I was sitting next to someone with a smartphone and gave them my store URL to check out a specific price on a product, and the price or add to cart wasn't visible. I didn't even look to see if there was a horizontal scroll bar. I now see there is, but it wasn't there before and I have no idea how long it's been like this.

My site passes the Google mobile friendly test, so I don't understand this.

Does anyone have a suggestion how this can be adjusted. Scary to play around with it and break the responsiveness!

https://www.designerperfumesnob.com/...Purr/EDP/3.4oz

~Thank You

**RixStix** · 29 Aug 2016, 12:44 AM

Does the demo exhibit the same issue?

If not, the obvious is to compare the files differences from the default download to your installation.

Sorry, didn't mean for the comment to sound as it does. I've been the recipient of similar and had the Oh Carp moments.
I bet it is something really simple.

**mc12345678** · 29 Aug 2016, 01:14 AM

It is relatively...

Didn't look/compare with the demo, but when I opened the site on my desktop computer, shrunk the width of the image down, I could see the position of the div id="cart" group move over to the right like what was described. With firebug for firefox, identified that there was a margin-left: 400px applied... Further this is applied in: https://www.designerperfumesnob.com/...stylesheet.css line 422... The effect of that is, when the screen is "normal" that section is pushed slightly to the right to be more "centered", but when the screen is otherwise configured, then it is/ca be off screen. If it is desired to cause that sort of shift at different resolution, then need to work it into the css instead.

Anyways, changing line 422 of includes/templates/avonlee_resp/css/stylesheet.css to be

Code:

#cart {
  font-size: 13px;
  margin-left: 56px;
  margin-right: 0;
  margin-top: 0;
  overflow: hidden;
  width: 225px;
}

or similar in adjustment of margin-left even down to 0px allowed the content to come back...

Still suggest the above recommendation to restore/or try to restore the original setting, but more than likely such individual modifications should be captured in responsive.css instead of stylesheet.css.