Responsive title woo commerce and image size

[FLYFLY]

Hi
I need to move and resize title single product and price on media under 695px.
How i can do that ?
Url : https://www.volomax.fr/produit/pack-enfant-2vols/
Thanks for all

gwen

[Prasant]

Hello Gwen,

Thanks for asking. "

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 695px) {
    
    .woocommerce div.product .images {
    float: left;
    width: 32%;
    margin-right: 20px;
    }
    .woocommerce div.product .summary{ 
     margin-top: 0;
     width: 65%;
     display: contents;
     }

     .woocommerce div.product .summary p {
     text-align: center;
     }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[FLYFLY]

THANKS

I would also like to decrease the size of the title

Thanks

[mldarshana]

Hi There @FLYFLY

Add the following CSS rule also into the above provided media query.

.woocommerce div.product .summary .product_title {
    font-size: 150%;
}

Altogether, it should be looks like as follows.

@media only screen and (max-width: 695px) {
    
    .woocommerce div.product .images {
      float: left;
      width: 32%;
      margin-right: 20px;
    }
    .woocommerce div.product .summary{ 
       margin-top: 0;
       width: 65%;
       display: contents;
   }

   .woocommerce div.product .summary p {
     text-align: center;
   }
  .woocommerce div.product .summary .product_title {
    font-size: 150%;
  }
}

Hope that helps.

[FLYFLY]

HI
the title and are not in good position.
I’d like they are inline with the picture.

thanks

[mldarshana]

Hi There,

I could not experience this issue on my end. Could you please try clearing your browser cache and re-test this issue again.

If you’re still having this issue, pleas please provide more information on the screen size, browser and the device that you have checked so that we can assist you accordingly.

Thanks!