Public Forums 71,145 posts

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#724951

Hello
in this website in progress: http://playground.cat.org.uk, Im using the corporate layout as the home page at this url. The smaller image icons below the slideshow arent sitting in correct position when in responsive view such as in smaller layouts ie mobile view, as one of the images is moving down.

It seems to because one of the lines of text under an image is longer than another. Its a bit annoying if this makes the layout break.

I’ve tried to build the page as similar as possible to your demo, following your documentation, each image icon is a different module, though with 6 positions not 4.

Please help!

thanks

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#725100

Hi @juliejo,

Please navigate to admin >>> Extensions >>> Template Manager >>> choose purity_III – home page >>> switch to tab Layout >>> choose Responsive Layout >>> switch to Extra Small >>> in this block, drag each position here to make it full width.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#754889

Hi @juliejo,

Please navigate to admin >>> Extensions >>> Template Manager >>> choose purity_III – home page >>> switch to tab Layout >>> choose Responsive Layout >>> switch to Extra Small >>> in this block, drag each position here to make it full width.

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#756462

Hi
Thanks for responding. I’ve tried what you suggest. It certainly solves the issue with mobile devices. Though Im worried the layout doesnt look so good for slightly larger ie vertical view on tablets, because of the icon shape. If youve any ideas to sort that too, it would be perfect!
thanks
Julie

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#756519

Hi @juliejo,

First, try to test your site in different device (popular only please) here and let me know if there’s any problem arise.

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#756564

Hi

The problem is a layout problem. I wanted my photo icons to look fairly small, and like in your corporate layout in the demo,to sit two across in rows in smaller devices. I dont feel that just making them one across is a solution, as then the icons are too big, else have a big white space at the side. Perhaps if there were some more detailed instruction as to the correct way of building the row of custom modules that sit under the sildeshow in the layout demo as perhaps Ive missed something out. I noticed that in your demo, the text under the photos is of different lengths but there is no slipping down of the images.

So for now, Im going to put my photos back to two across and try harder to find the problem.

If theres any more help available as to how I could perhaps tweak the custom modules to prevent the issue, or the image size perhaps? that would be great!

Julie

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#756565

PS Ive tried the ‘two across’ view in the testing page you suggest, and found that the issue doesnt always happen on small devices, but it does on ‘iPhone 6 Plus(portrait)’, and when I test it on samsung devices at home (mobile and tablet admittedly older ones but still very common!)

BUT as an aside, the mega menu and fixed top bar is totally broken in OS X Yosemite safari 8 and OS X Mavericks chrome 36. Eek. Yet ive left it pretty much as default Purity III. Only changed the colour!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#756636

Hi @juliejo,

In this case, kindly provide a screenshot where I can see the issue so I can start investigating the problem for you.

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#932012

Hi
Im back trying to solve the corporate icons layout.
So heres the problem, in iphone 6 etc, with the icons
https://www.browserstack.com/screenshots/3cfdef35d22db1553c8a4123ac7f12a7f50695f3

then the broken menu (or is it broken) in OS X Yosemitesafari 8 – perhaps its jsut hte menu going downt he page

Julie

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#932293

I tested the URL of your site on my laptop and the menu is working as well, please have a look at my screenshot

---

Attachments:

1. 

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#934085

Good news about the menu thanks.

But I’ve still got this dilemma – the corporate layout icon images beard layout in iphone6 etc if they are ‘two across’ in mobile/ vertical tablet view, BUT, if I solve it by stretching them to one across as you suggest above, then theres a big gap down the side when on a tablet vertical.

So not sure what to do here and the website needs to go live very very soon!

Also got another layout issue with responsive images in category blog view – will start a new thread there, maybe, its on my ‘people’ page ( I gave up with your suggested staff team layout as its too fiddly for non tech staff to edit due to amount of html coding in article plus I wanted to incorporate tagging) The category blog won’t allow me to switch off responsive images and it doesn’t enlarge my staff images in proportion when being responsive

If I can solve these, and one more thing Im ready to go!

Julie

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#934093

Ah, Ive just thought, I can tweak the width of the ‘extra small width media query’ in the code perhaps?
Ive just tried making the icons smaller in width and its solved it, though a white space is down the side

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#934230

@juliejo: If possible, you can give me the URL of your site and the screenshot with a description on that. It will help to understand the problem on your site. I will help you to investigate this bug

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#934689

Hi
The website is at http://playground.cat.org.uk

The screen shot for iphone6 is attached.

Im referring to the square photos as icons, which are to promote several masters courses for the charity I’m building the website for.

The problem seems to be when my text is long under the icons. Though Ive noticed in your demo the columns don’t break when different text lengths (though they do in another part of the demo incidentally) .
The trouble is if I reduce it to one icon per row as someone suggested previously then on tablets theres a column down the right. Id prefer to be able to have it two columns ideally.

thanks for looking at it, I’ve used Joomla for ages but am only just getting to grips with responsive , bootstrap , layouts, mostly the JA Purity III template seems great in many ways
Julie

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#934947

@juliejo: Try this to fix the problem on your site

Open templates/purity_iii/css/custom.css file and add new rule

@media  (max-width: 767px) {
    .t3-spotlight-1 .col-xs-6 {
        min-height: 230px !important;
    }
}

[Author]

Posts