• Resolved babyuniverse

    (@babyuniverse)


    Hi,

    Can you please help me with a CSS fix. When the page is viewed on an Iphone the product image and text is olverlapping. The hamburger menu is also not working correctly.

    This is a child theme.

    Thanks
    Richard

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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?

    Thread Starter babyuniverse

    (@babyuniverse)

    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.

    Thanks
    Richard

    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;
      }
    }

    I made those changes, it still doesn’t seem correct on iphone?
    Not sure what I am missing

    Thanks
    Richard

    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?

    Thread Starter babyuniverse

    (@babyuniverse)

    I made the changes to https://www.simonjohnson.com/wp-content/themes/storefront-child/style.css?ver=1.0

    I have now also updated the cache. It still doesnt look right

    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

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS Help’ is closed to new replies.