ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• March 18, 2014 at 4:33 pm #58716
  MHC

  Member

  Post count: 247

  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,

  March 18, 2014 at 4:38 pm #58728
  MHC

  Member

  Post count: 247

  This reply has been marked as private.
  March 18, 2014 at 4:43 pm #58735
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 18, 2014 at 5:00 pm #58747
  MHC

  Member

  Post count: 247

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

  March 18, 2014 at 5:16 pm #58756
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  March 18, 2014 at 6:27 pm #58777
  MHC

  Member

  Post count: 247

  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!

  March 19, 2014 at 8:57 am #58857
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

• Back to forum

  Posted in: Neighborhood