WebsiteBaker Support (2.8.x) > Templates, Menus & Design

bs_naturak responsiveness: header (banner) images do not show

(1/1)

seanie_morris:
Hi all,

I have my own website at www.greenbeaniebook s.ie using the bs_naturak template:

http://WebsiteBaker.at/wb-templates/template-bs_naturak.html

and the problem I am having is that, when the view is on a phone, or even the browser shrunk down to phone screen size (to simulate the @media(max-width:640px)), the banner (header) images are lost but the descriptive lines of text remain and change as expected every 3 seconds.

I don't know where to start to paste example code, this template has many files to make it work!

I created a test directory at www.greenbeaniebook s.ie/testing/wb to try and recreate the problem, but I changed so much to make it work (jQuery problems were a first) that I have to swap lots of code to get the desired effect that you would see on the full version of my own site (and similar the bs_naturak link above).

Seanie.

dbs:
Hi, are pictures like this in your template?:
http://www.greenbeaniebooks.ie/templates/bs_naturak/img/slide5-small.jpg

This will used at small screens instead the big pictures (without the "-small").

seanie_morris:

--- Quote from: dbs on December 11, 2015, 02:54:42 PM ---Hi, are pictures like this in your template?:
http://www.greenbeaniebooks.ie/templates/bs_naturak/img/slide5-small.jpg

This will used at small screens instead the big pictures (without the "-small").

--- End quote ---

Hi,
There are a series of images used in the slideshow at the top: www.greenbeaniebook s.ie/templates/bs_naturak/img/slide5.jpg > slides 1 to 6 in total. There are no smaller ones, and the original extracted contents of bs_naturak do not use smaller versions either (I can't find reference to making the large ones smaller either).

Seanie.

dbs:
You should provide smaller images for the mobile devices.
Make a test and create this one image slide1-small.jpg (or 1 to 6) and place it in the same folder.
Should be displayed only on small screens.

Not tested, but the sourcecode shows the path to the missing images like slide5-small.jpg.

seanie_morris:

--- Quote from: dbs on December 11, 2015, 05:09:12 PM ---You should provide smaller images for the mobile devices.
Make a test and create this one image slide1-small.jpg (or 1 to 6) and place it in the same folder.

--- End quote ---

Done, and that worked. (Y) Happy days! Thanks for that, I don't know why I didn't think about that, I didn't even realise the 'broken link' to e.g. www.greenbeaniebook s.ie/templates/bs_naturak/img/slide5-small.jpg

I can feel my headache leaving me now...  :-)


Seanie.

Navigation

[0] Message Index