How to Work with Responsive Fonts when reducing Screen size

0
votes

I am looking for help in regards to a new website that I have built. I have been building Joomla sites for the last 6 months but this is my first site that I am trying to make responsive based on the media queries that I have added.

The site that I have built can be found at the following:

[http://s116169771.websitehome.co.uk/blingphones_j3/]

I have built media queries for the following sizes: 768px, 600px, 568px, 480px, 400px, 320px

What I have noticed is that I still have issues with some sizes, for example when I view the site on my Samsung S6 the max size for this screen is 640px, so this was causing me issues with a 'box' image that had used which was a png.

I have since changed this into an svg file so that it resizes in accordance to the screen size that I am on. The following is 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;
}

I have also made sure that the text within the boxes has a width of 100% so this resizes with the box.

The problem I now have is rather than adding more breakpoints, I need to ensure the heading on the page 'WE FIX BROKEN, DAMAGED MOBILE PHONES' resizes like how the box and the text within the box does.

Unfortunately when I am resizing the screen from 767px to 601px I notice a gap appearing under the mobile phone image and I am not sure how to fix this to be honest.

I have looked through the Firefox Developer Tools but just cant figure this out. I also have the font sizes as em and thought this would work in the same way as the svg but this isn't the case.

My current site has been built using the latest version of Joomla 3.8.4.

Would really appreciate some advice on where I am going wrong and what I need to consider to ensure when resizing the page is displayed correctly without adding any more breakpoints.

Sheraz, just to confirm the template already has the bootstrap framework as part of its build. The following is the code in my index.php file.

JHtml::_('bootstrap.framework');
2
htmlcssresponsive-designjoomla3.0
You can refer this css-tricks.com/viewport-sized-typography - Milan Agheda
Thank you Milan, exactly what I was looking for. Will have a go with that and post how I get on. - Michael

2 Answers

0
votes

I have read you question and i think the easy and best way of making a website responsive is through bootstrap. In bootstrap there are pre-defined classes you can use to make that thing responsive For example: To make a image responsive use img-responsive class so it will resize itself according to the screen.

<img src="source" class="img-responsive" width=100% height=500px/>

Except this bootstrap contains grid system you can align them easily.

I hope this will help you

0
votes

One thing that I notice with your media query styling of text inside the .boxestext1 div is that at narrow viewports, the text is too wide for the actual space, and it overflows the box.

One suggestion is that if you replace your current CSS 

@media (max-width: 480px){
 div.boxestext1 {
    ...
    margin: 0 32px 0 32px;
    width: 373px;
    ...
 }
}

with something like the following, it will scale better at smaller viewports. 

@media (max-width: 480px){
    div.boxestext1 {
        ...
        margin: 0;
        width: 100%;
        ...
    }
}

If you want good results on mobile you can never be too careful about hardcoding widths and other units.

Good luck!