Dawn theme product page Mobile view customization - urgent

Topic summary

A user is experiencing a layout issue on their Dawn theme product page where the quantity selector and “Add to Cart” button are overlapping in mobile view. They want these elements displayed on the same line, similar to desktop view, with changes affecting only mobile devices.

Proposed Solution:
A community member provided CSS code to fix the alignment:

  • Navigate to Online Store > Themes > Actions > Edit Code
  • Add custom CSS to Asset > base.css targeting screens under 749px width
  • The code adjusts .price-per-item__container to use justify-content: flex-start

Status: The issue appears to have a working solution pending implementation and confirmation from the original poster.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

My website was created using dawn theme in that I need to customize the product page mobile view in that Quantity selector and add to cart button overlapped but I want the quantity selector and add to cart button in same line like mobile view. the customization should only affect mobile view.

website: https://the-rugged.com/products/elegant-crew-tee-crimson-peak

password: rugged

Thanks in advance

Personalizar a visualização mobile da página de produto no tema Dawn é realmente crucial hoje em dia, já que a maioria dos usuários acessa pelo celular e espera uma experiência fluida e intuitiva. O artigo trouxe ótimas dicas práticas para ajustar elementos e deixar tudo mais leve e rápido, o que, na minha opinião, faz toda a diferença na hora da conversão. Isso me fez pensar que, assim como uma página mobile bem otimizada, serviços como o Magis TV Gratis também precisam garantir que o streaming no celular seja impecável, sem travar ou perder qualidade. Você já teve que fazer alguma mudança urgente na versão mobile que mudou totalmente o resultado?

Hello @Sivadarshan ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:749px){
.price-per-item__container {
	justify-content: flex-start !important;
}
}

Let me know if you need further assistance!