Archived topic
Design problem on the theme's products page
7 replies · Started by Claudio on October 25, 2021
Hello, I am writing to you about a design problem on the theme's products page with the woocommerce plugin, for example: http://bailogy.com.ar/producto/opcion-gamer-03-pc-gamer-intel-i7-6700k /
The page on desktop can be seen well, but in mobile settings, the h1 class = "product_title entry-title" and the div class = "woocommerce-product-details__short-description", which was previously below the images, goes to be on the same line, and is compressed until you are off screen. Above is a very large blank space below the images until you reach the rest of the content. (Here you can see a screenshot: http://bailogy.com.ar/wp-content/uploads/2021/10/Screenshot-2021-10-25-at-09-58-33-Opcion-Gamer-03-PC-Gamer-Intel-I7-6700K-Bailogy-Informatica.png)
I hope they can solve it.
Thank you!
Hi there,
can you try adding this PHP Snippet to the site:
add_action( 'after_setup_theme', function() {
remove_action( 'wp_head', 'generate_add_viewport' );
add_action( 'wp_head', 'generate_add_viewport', 1 );
} );How to add PHP: https://docs.generatepress.com/article/adding-php/
Then clear any caches and let me know.
Hi David, add the code you passed to me with the Code Snippets plugin, I cleared the cache and tested it in various browsers, but the problem remains the same.
I also tried it by pasting in the functions.php but it remains the same.
Can you try this instead?
add_action( 'wp', function() {
remove_action( 'wp_head', 'generate_add_viewport' );
add_action( 'wp_head', 'generate_add_viewport', 1 );
} );Hi Leo, I tried pasting this code in the functions.php but with no changes.
Excuse the query, but don't they have more to do with a css problem than a php problem?
I consult this to understand more about the solutions they are offering me.
The PHP Snippet was to move the viewport meta up the stack in the <head> of the site, this was in a ( failed ) attempt to make sure the Mobile CSS styles are loaded sooner... its worth keeping that snippet until you update to the latest version of the Theme ( just released ).
But i didnt spot it looks like you have a custom gallery - so now add this CSS:
@media(max-width: 768px){
#wpgs-gallery.woocommerce-product-gallery {
float: none;
}
}Thanks so much for the explanation! there it worked perfect! Thank you very much David and Leo for the help!
Glad we could be of help
