Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries.
You can check out the site I've put together here:
[
I've created media queries for various screen sizes such as 768px, 600px, 568px, 480px, 400px, and 320px. However, I'm encountering some issues with certain sizes, particularly when viewing the site on my Samsung S6 where the screen maxes out at 640px. This was causing problems with an image 'box' I had used, which was in PNG format.
To address this issue, I converted the image to an SVG file so it could resize accordingly based on the screen size. Here's a snippet of my CSS:
@media (max-width: 767px) and (min-width: 601px) {
#mainbox {
float: left;
position: relative;
background: url(../images/box.svg) no-repeat;
background-size:contain;
margin-bottom: 40px;
}
In addition, I ensured that the text within the boxes has a width of 100% to resize along with the box itself.
The current challenge I'm facing is figuring out how to make sure the heading on the page, "WE FIX BROKEN, DAMAGED MOBILE PHONES," resizes similarly to the box and its text.
As I resize the screen from 767px to 601px, I notice a gap appearing under the mobile phone image, and I'm struggling to resolve this issue. I've tried using em units for font sizes, thinking it would work like SVG, but unfortunately, it doesn't seem to be the case.
My site was built using the latest version of Joomla 3.8.4, and just to note, the template already includes the Bootstrap framework. Here's the code in my index.php file:
JHtml::_('bootstrap.framework');
Your guidance on what I might be doing wrong and what considerations I need to keep in mind to ensure correct display while resizing the page without adding more breakpoints would be greatly appreciated.