+1
Under review

Responsive mishandling of images

paul.king 2 years ago updated by support (Support) 5 months ago 10

BoldGrid responsive image handling for mobile phone and tables is giving incorrect results for bordered images. In the WP editor preview, they look correct, but in reality, images are positioned differently within the borders on mobile devices compared with  desktop browser (chrome browser, latest version as of today's date tested for each platform)

Noting that images displayed using a 3rd party carousel plugin on the same website are not affected in this way - and Bold Grid images that are not bordered seem unaffected. only BoldGrid bordered images (in this case rounded corners) seem to incorrectly position images within their borders on mobile devices

Under review

Thank you for helping us improve BoldGrid!  Our team will investigate this bug and I hope that we can release a fix for it in an upcoming release.

Please let us know if there is anything else that we can do to assist you.

Hi, a similar issue applies to parallax images used as backgrounds. Even though this does not show up in BoldGrid prteview for mobile devices, parallax background images tile, as if the selected positioning of the image was being ignored, whereas desktop version of same does not

Thank you for contacting us.

If possible, can you provide us a link to one of your pages where the background images are tiling?  I am currently unable to replicate the problem on my end and any additional information you can provide us will help narrow down the source of this bug.

Hi, the page http://thecdc.nz/contact-us/  has a parallax background that tiles for me on a cellphone

Thank you for providing that information and I have reported this bug to our development team for further review.   I hope that we can release a fix for this problem in an upcoming release and thank you again for helping us improve BoldGrid.

Eu sou do Brasil e perguntei sobre o meu site, ele não responde quando dá uma olhada no celular, mas dentro do wordpress, antes de publicar, tudo bem, depois que isso fica fora da posição correta. Há um grande espaço à direita (olhando no celular), por exemplo.

Por favor, preciso de ajuda. 

Obrigado,

Ulisses

Usando (Westview - Tema)

Site:  www.dbrothers.com.br

Hi Ulisses, thank you for contacting us.

I am sorry to hear that you website is no resizing as expected on mobile devices and our team will do everything we can to help!

It looks like the resizing issues could be related to the Contact text used in your footer, and when I viewed dbrothers.com.br at the mobile phone screen size that text does not appear to be breaking, which is causing a horizontal scroll on the page.

You can correct this problem by using some custom CSS code (https://www.boldgrid.com/support/using-the-boldgrid-theme-framework-customizer/how-to-use-the-custom-css-editor/) and the following snippet should fix the line breaking behavior for that text:

.palette-primary .contact-block span {
    white-space: normal;
}

Hopefully that code fixes the problems you are seeing and please let us know if you have any additional questions!

Obrigado, mas ele corrige apenas a primeira página. Eu preciso corrigir todas as páginas: 
"NOSSOS Serviços"

"Contato"

"Blog" 

 Como posso fazer isso, pois também não acontecerá em outras páginas?

 

Obrigado novamente.

Ulysses 

Hi Ulysses, I am glad to hear that snippet fixed the problems on your home page!

One reason you might not be getting the design you want on your other pages is because of how those images have been added to the page content.

On NOSSOS Serviços and Contato both of the large images there are being used as background images for sections instead of being added to the page as regular image elements.  Background images do not actually take up any 'space' on the page and will only be as large as the sections they are applied to.  Since both of the sections using those images do not have any content in them they collapse down as the available screen space shrinks, which then reduces the display area for them on mobile devices.



Instead of setting those images as backgrounds try adding them as Media inside of their sections.  Hopefully that will help you get the images displaying correctly on mobile devices!