Need to remove float in module css just for iphone5
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
I have a problem with a module on our website. A problem which only occurs when viewing on an iPhone 5 at 320x568
Basically I have 'float-left' set on an image to push the test to the right hand side. On all other mobile tests the float 'degrades' and the text goes underneath the image.
But on the Iphone 5 this does not work
See the 'World News' module here www.asafeworldforwomen.org/
Is there a way to remove the float using css only for an IPhone?
I still want the module to be displayed at smaller sizes so using responsive classes won't help!
Ideas greatly appreciated
Andrew - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
You can always define css custom file per browser or per device control as explained here
gantry-framework.org/documentation/jooml...r_browser_control.md - Check my services at: Mihha-Vision
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Hi Igor thanks for that!
I will ask the question in the Gantry forum (forgot it existed) so I can get a better understanding what to do!
A - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
Since you are suing Kirigami template, create the following custom css file in template's css folder
rt_kirigami-iphone.css
Place custom css code that will remove float from the module in that file and this custom code will be applied only on iphone browser
I am afraid that I don't have iphone so I can't test which code exactly you should use
- Check my services at: Mihha-Vision
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Apologies Igor!
I forgot it was all one big family!
Ok - I read the documentation - actually I had skimmed it before I posted here - but same problem - I don't really understand what I have to do!
Can you elaborate a little?
I can see that 'Platform' is the relevant bit to deal with
platform: [iphone (worths for both iphone/ipod), ipad, android, mobile, win, mac, linux, unknown]
But from then on I am at a loss
A - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Igor Mihaljko wrote:
Since you are suing Kirigami template, create the following custom css file in template's css folder
rt_kirigami-iphone.css
Place custom css code that will remove float from the module in that file and this custom code will be applied only on iphone browser
I am afraid that I don't have iphone so I can't test which code exactly you should use
Thanks Igor
That's great - I can explore from there!
I don't have an iPhone either! Just one of our team keeps an eye on hers for us!
Hence the issue arrived
As a point of interest for anyone who reads this thread - I use a totally free testing site for checking how our site looks on mobiles.
It has worked well for us so far
http://mobiletest.me/ - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
That mobiletest website doesn't do anything but shows your website in a IFRAME tag with specific width and height. That is not the real website test that would show you how exactly does the website look on real device mobile browser. You can do the same by using some kind of browser extension that will change your browser window size. For example, I use (for Chrome) the following extensions:
Window Resizer - chrome.google.com/webstore/detail/window...hinjdeammmilcgefonfh
or
Dimensions - chrome.google.com/webstore/detail/dimens...fijmfehjbnmifk?hl=en - Check my services at: Mihha-Vision
-
Time to create page: 0.053 seconds