single product page breadcrumb responsive problem

  • Resolved musa1111

    (@musa1111)


    2 years, 11 months ago

    hi i need help about the breadcrumb problem. When i open a single product page, the breadcrumb located to right side of the product image but breadcrumb must located at bottom side of the picture please open this link look at the ipad air, iphone 12 pro, iphone XR dimensions responsive mode you will see that problem.

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

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author RadiusTheme

    (@techlabpro1)

    Hello,

    Can you please send me a creenshot?

    Thanks

    Thread Starter musa1111

    (@musa1111)

    i give you screenshot link i sent to you single product page

    when i remove this plugin this problem is solved, namely this plugin causes the broken breadcrumb

    that is the screenshot link

    https://drive.google.com/file/d/1FEi0XUR9sVNfpHgfHGb2MLi-go7UfyCy/view?usp=sharing

    Plugin Author RadiusTheme

    (@techlabpro1)

    Hello,

    Sorry for the late but we checked and don’t see the issue. I checked with my iPhone 12 also desktop different responsive view all look like this https://prnt.sc/bYzETrLOvJ4S

    breadcrumb bottom of image as you told in screenshot.

    Thanks

    Plugin Author RadiusTheme

    (@techlabpro1)

    Hi,

    In 768px resolution I got this issue please this CSS write in

    Appearance => Customize => Additional CSS

    .woocommerce .woocommerce-breadcrumb {
  clear: both;
}

    Let me know how it works.

    Thanks

    Thread Starter musa1111

    (@musa1111)

    Breadcrumb problem solved but there is another problem between 768px and 922px resolution the page will not responsive exactly if i get a resolution between 768px and 922px, such as 800px there is happening a gap right side of image i dont want it. The appearance should be like either tablet and mobile appearance (full image), or pc appearance (image and right side informations).

    The gap is mistake. i send you a link

    https://drive.google.com/file/d/1Nf5uXQwJEfcGFCgXQ-bCTDoW6NOrhxDX/view

    • This reply was modified 2 years, 11 months ago by musa1111.
    • This reply was modified 2 years, 11 months ago by musa1111.
    • This reply was modified 2 years, 11 months ago by musa1111.
    Plugin Author RadiusTheme

    (@techlabpro1)

    Hello,

    Looks like this CSS coming from the theme. Please check the screenshot https://tinyurl.com/y55p2fus

    But in same resolution (769px), our demo is ok https://prnt.sc/WVsAfrHi8riv

    demo https://radiustheme.com/demo/wordpress/wooplugins/product/woocommerce-variation-images-gallery/

    Thanks

    Thread Starter musa1111

    (@musa1111)

    What should i do in this case? Can i solve it with CSS? Any suggestion?
    By the way when i deactivated this plugin the problem is solved. I think this plugin causes the problem

    • This reply was modified 2 years, 11 months ago by musa1111.
    Plugin Author RadiusTheme

    (@techlabpro1)

    Try this CSS but some breakpoint is not real device with I think can ignore that break points

    @media (max-width: 921px){
.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
    float: right;
    width: 48%;
    clear: none;
}
}

    Thanks

    Thread Starter musa1111

    (@musa1111)

    Now there is another problem happened, under the 768px product title part is divided to two parts i send to you a screenshot link

    https://drive.google.com/file/d/1FtDLuNoisWE0yzxZRtyNdJ0g0UEi4PHl/view

    Plugin Author RadiusTheme

    (@techlabpro1)

    Please remove the previous code last code need specific resolution condition.

    Thread Starter musa1111

    (@musa1111)

    I REMOVE (.woocommerce .woocommerce-breadcrumb {
    clear: both;
    })

    THIS CODE AFTER I PASTE

    (`@media (max-width: 921px){
    .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
    float: right;
    width: 48%;
    clear: none;
    }
    }`)

    THIS CODE BUT THE PROBLEM STILL SAME

    https://drive.google.com/file/d/1FtDLuNoisWE0yzxZRtyNdJ0g0UEi4PHl/view

    Plugin Author RadiusTheme

    (@techlabpro1)

    No I told last code to remove

    keep it 

    .woocommerce .woocommerce-breadcrumb {
clear: both;
}

    Remove 

    @media (max-width: 921px){
.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
float: right;
width: 48%;
clear: none;
}
}
    Thread Starter musa1111

    (@musa1111)

    ok i do it but still we have last problem

    https://drive.google.com/file/d/1Nf5uXQwJEfcGFCgXQ-bCTDoW6NOrhxDX/view

    Plugin Author RadiusTheme

    (@techlabpro1)

    Try this you can change the PX as you need

    @media (min-width: 768px) and (max-width: 991.98px) { 
	.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
	float: right;
	width: 48%;
	clear: none;
	}
}
    Thread Starter musa1111

    (@musa1111)

    ok its solved i made it (min-width: 769px) and the problem has been finished thanks for your attention

    • This reply was modified 2 years, 11 months ago by musa1111.
Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘single product page breadcrumb responsive problem’ is closed to new replies.