Hello, depending on the width of phone screen, the buttons look good or cut. How can I write code for this to make it work well and not to be cut for all phones, without depending on the width of phone screen?
Here is screenshot while it looks good on an iPhone 12 Pro:
To ensure that the buttons in your code are displayed properly on various phone screens without being cut off, you can use CSS techniques such as flexbox or grid layouts. Here’s an example of how you can modify your code to achieve this:
In the above code, the min-width, max-width, and width properties are set to 100% for all the buttons within the .featured-product section. This ensures that the buttons will occupy the full available width of their container, regardless of the screen size.
By setting the width properties to 100%, the buttons will automatically adjust their width to fit the container without being cut off or overflowing.
Note that you don’t need to duplicate the media query for each button. Instead, you can combine them into a single media query block, as shown in the example above. This helps keep your code more organized and reduces redundancy.
Make sure to place this modified code in the appropriate section of your HTML or CSS file, taking into account any existing styles and selectors that may be affecting the buttons’ appearance.
By using a fluid and responsive layout, the buttons should adapt to different phone screen sizes, allowing them to display properly without being cut off.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Thank you for you reply. However, it’s a bit more complicated as I moved the dynamic checkout button to the right, next to the add to cart button, because that’s how I wanted it to look on the desktop. In this case, by using your code it looks like this:
I feel like the size of buttons and so on are good, but the thing is to move the dynamic checkout button to the left and lower. As I did that according to the original post, it looked good but only for specific width’s devices such as my iPhone.
Could you help me out with coding it to make it look like that:
But to be like that on all mobile phones without depending on the width’s screen?
I was setting it up manually by using margin-left and margin-top so I guess that’s the problem why it suited only for specific devices. I hope there is some code that will move the dynamic checkout button below the add to cart button instead of setting its position manually.
