Docs

[dano007]

Hi,

http://slcassociates.co.uk/geomatic-engineers/

When you view this page on a small screen mobile device the default seems to be to wrap the text so only a few words fit per line, is it possible to reduce the actual font size when viewed on mobile devices? I’m not sure I follow how your ‘responsive’ element works…Also, could the actual borders be widened or will that effect the overall template design?

Thanks for the help.

[Rahul]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[dano007]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 480px){
    .page .entry-wrap {
        padding: 0;
    }
}

Hope it helps 🙂

[dano007]

Thanks 😉 that looks better, is there a way to address the same issue when viewed on an ipad?

Or in fact any other smaller screened device?

About Us

Thank you
Dan

[Rupok]

Hi Dan,

You can create another instance of media query and set your own max-width value. You will find all propertional screen size for the devices here – http://mydevice.io/devices/

Cheers!

[dano007]

Hi, ok I did so, by adding

@media (max-width: 768px){
.page .entry-wrap {
padding: 0;
}

But as you can see from the screen shot, I have some strange wrapping effects happening with the heading text?

[Joao]

Hi There,

Please use this code instead:

@media (max-width: 1069px){
    .page .entry-wrap {
        padding: 0;
    }
x-promo-content. h3.man {
font-size: 15px;
}
x-promo-content. h5.man {
font-size:12px;
}
}

Hope it helps, if that does not work please provide your admin credentials in a private reply so we can take a closer look.

Thanks

Joao

[dano007]

This reply has been marked as private.

[Joao]

Hi There,

Please use this code instead:

@media (max-width: 1069px){
    .page .entry-wrap {
        padding: 0;
    }
.x-promo-content h3.man {
font-size: 25px;
}
.x-promo-content h4.h5.man {
font-size:16px;
}
}

Hope it helps,

Thanks

Joao

[dano007]

Sorry to be a complete pain, but if you look at the two examples, I still need to get to the same point for the ipad screen size as has been achieved for the smaller iphone screen, what I mean by this is that you will see on the iphone screen the borders have been extended out closer to the edge,so it makes more space for the words to wrap around. How can I do this for the ipad screen size?

[Lely]

Hi There,

Please try adding this custom CSS:

@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px){
.page-id-41 div#x-section-5>div {
    width: 95% !important;
}
}

Hope this helps.

[dano007]

This reply has been marked as private.

[Rupok]

Hi there,

In that case update the previous code a bit :

@media only screen and (min-width: 768px) and (max-width: 1024px){
.page-id-41 div#x-section-5>div {
    width: 95% !important;
}

.page-id-41 .x-promo-content {
  padding: 10px;
}
}

Hope this helps.

[dano007]

thank you.

[Author]

Posts