CSS Help

Where are you wanting the product image to display relative to the title/description/price/etc? Right now, the following line in your child style.css is causing the issue

/* move brand/title/price above image */
	.product-brand-title-price {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 130px;
	}

In regards to the mobile menu, how do you want it to look when the icon is clicked on?

Hi @babyuniverse

First, you’ll need to remove the code that @jarretc quoted above, and then replace it with this:

@media screen and (max-width: 768px) {
  #main > .product {
    display: flex;
    flex-direction: column;
  }

  #main > .product .summary {
    order: -1;
    padding-top: 30px;
  }

  .handheld-navigation {
    background: white;
    border: solid 1px #c0c0c0;
    border-bottom: 0;
  }

  .main-navigation ul.menu > li > a {
    padding: 10px;
    border-bottom: solid 1px #c0c0c0;
  }
}

The original code that I suggested to remove, is still present in styles.css (lines 6953-6959), and I also don’t see the code I suggested applied anywhere.

Where did you add this exactly?

Hi @babyuniverse,

Can you describe what doesn’t look right from here? I see the elements of the page roughly where you’d mentioned that you want them.

Thanks for your reply. On the mobile site I would like the text followed by the region and quantity an then the image.

The mobile menu I would just like it be visible. Maybe a white background. Currently I cannot see the menu.

These seem for the most part fixed, outside of any smaller tweaks to perfect them.

https://cld.wthms.co/CMlQrv