roduct page squished on mobile devices

[MHC]

Hello,

After using the below css to move product title, the product page looks squished on mobile devices.

.woocommerce div.product .entry-title {
display: block;
float: right;
width: 48%;
text-align: left;
font-size: 26px;
margin-bottom: 30px;
}

I tried the below css to fix it, but doesn’t work:

@media (max-width: 600px) {
.woocommerce div.product .entry-title {
float:left;
width:100%
}
}

Could you help me to fix this problem?

Thanks,

[MHC]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

I’m guessing it is the css that you’ve added, try removing the css then see if the page is still broken.

– Kyle

[MHC]

But I need the first css provided by ed in old thread. I already removed the second css. Still broken though. Any suggestion?

[Kyle – SUPPORT]

Please can you show me the link to the old thread so that I can see what Ed said.

– Kyle

[MHC]

Hi Kyle,

I remember seeing it somewhere but can’t find the original thread now and only manage to find this:

http://support.swiftideas.net/forums/topic/move-product-title-2/#post-58619

This is also gathered from other people’s questions.

I need to use the first css becuase that’s the only way product name won’t be so far away from its price. Is it difficult to fix by css if it looks broken on mobile devices?

Thank you very much!

[Kyle – SUPPORT]

I’d suggest a different method.

1) Open up content-single-product.php in the woocommerce folder of the theme
2) Find this line on line 38:

<div class="entry-title" itemprop="name"><?php the_title(); ?></div>

3) Move it below:

	<div class="summary entry-summary">
		
		<div class="summary-top clearfix">

4) It should be in this order:

	<div class="summary entry-summary">
		
		<div class="summary-top clearfix">

			<div class="entry-title" itemprop="name"><?php the_title(); ?></div>
			
			<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

5) Add this to your custom css:

.woocommerce div.product .entry-title {
  display: block;
  font-size: 22px;
  margin-bottom: 20px;
}

Let me know if this works.

– Kyle