[AkhilParticipant]

Hi Guys,

So if you take a look at the site on a desktop it looks fine, however as the screen size gets smaller the images doesnt, so it looks really zoomed in when viewed on a mobile, can you help make the site auto resize it?

http://sandbox.brutonrealty.com/team/

Secondly,

when you shrink the screen size on this page all the text just moves down rather than being responsive/the promo boxes moving to the next line – any ideas?

http://sandbox.brutonrealty.com/team/

Thanks

[Paul RModerator]

Hi,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {

.page-id-9 .x-promo h3 {
    font-size: 150%;
}
.page-id-9 .x-promo .h5 {
    font-size: 100%;
}

.page-id-9 .x-promo .x-promo-image-wrap {
    width: 80%;
    margin: 0 auto;
}

}

You may change 150%, 100% and 80% to achieve your desired result.

Hope that helps.

[AkhilParticipant]

Cheers! I’m guessing I now have to be more responsible with my image choices as the actual resizing works fine. haha!

The Promo box issue isn’t with image but rather the boxes themselves. I want them to drop on to the second and third lines sooner rather than becoming really narrow.

Does that make sense?

[Paul RModerator]

Hi,

Yep, make sense.

You can add this under Custom > CSS in the Customizer.

@media (max-width: 1500px) {
.x-column.x-1-4 {
    width: 48%;
    margin-bottom:20px;
}

.x-container .x-column.x-1-4:nth-child(even) {
  margin-right:0;
}

}

@media (max-width: 767px) {
.x-column.x-1-4 {
    float: none !important;
    width: 100% !important;
    margin-right: 0;
}
}

Hope that helps.

[AkhilParticipant]

Gosh, you guys are so good at this.

Thank you!!

[Paul RModerator]

You’re welcome! 🙂

[AkhilParticipant]

Can you guys help optimise the site for mobile, earlier you suggested doing it in sector background to get the effect I wanted, but when you look at it on mobile that means you get the top half of the image rather than the left side of it. Can you make it so that on mobile you either get the whole image or no image?

http://sandbox.brutonrealty.com

[JadeModerator]

Hi Akhil,

The better option would be removing the image in mobile since it would be tricky to reposition and change it’s dimension as it is set as the background image of the entire section.

To hide it in mobile, you can use this CSS:

@media (max-width: 767px) {
    #x-section-1 .x-1-2:first-child {
        display: none;
    }
}

Hope this helps.

[Author]

Posts