gantry 5 browser specific css
-
-
- Peter Rutherford
- Newbie
- Posts: 16
- Thanks: 0
-
hi chaps
how do i apply browser specific css in gantry 5, i have tried doing it the same as gantry 4 with out all luck.
i wanted to have a specific custom.css for Safari. i created a custom-safari.css but it does not seem to work.
Is it differant with gantry 5?
thanks
Pete
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You can't do that in Gantry 5. We don't support browser specific custom CSS files because in modern browser they should render pretty much the same. Also, it's virtually impossible to accurately identify a browser any longer anyway as they can all spoof and use various user-agents.
Why do you need to do this? Have you got a specific example please?
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Please do a screenshot of your problem and annotate to make it clear.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Peter Rutherford
- Newbie
- Posts: 16
- Thanks: 0
-
oh ok thanks for the quick responce.
i am using fluent v1.04, i am finding that its fine with all browsers except safari 11 and 8 (maybe 9 and 10 also but i dont have one to test)
for some reason the font size in the news slider particale is massive. i figured i could nail the font size lower with this in the custom.scss
.g-newsslider .g-newsslider-slides .owl-item .g-newsslider-slides-item-content .g-newsslider-slides-item-title {
font-size: 2vw;
font-weight: 900;
line-height: 1.1;
}
this works but effects all browsers, would be nice to just target safari or even better just safari 11 and under, as the font size is fine in safari 12
-
-
-
- Peter Rutherford
- Newbie
- Posts: 16
- Thanks: 0
-
have provided url and account details in the secure tab
but to be fair i notice i have the same problem when viewing the fluent demo page on your demo site .
looking at it more, It seems to me that maybe its actually a problem with the screen width not being detected correctly as there is a much bigger border around the content.
-
-
-
- Peter Rutherford
- Newbie
- Posts: 16
- Thanks: 0
-
for any one else looking here is the screen grab i get when looking at fluent on the demo site
see how it shows more backgroud, and the newsletter particale text is massive. not sure if its related.
either way this is why i was hoping to configure a safari specific custom.css
thanks again - Last Edit: 5 years 6 months ago by Peter Rutherford.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I think that you will actually find that your browser zoom is not set to 100%. Please double check that because the site appears fine (and very similar) in all browser to me. Browser zoom is not detectable programmatically - it is purely a feature of the browser.
Also please note that this template only supports Safari 10+ (see screenshot).
Your subscription appears to have expired. Support does require a current subscription.
Regards, Mark. - Last Edit: 5 years 6 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Peter Rutherford
- Newbie
- Posts: 16
- Thanks: 0
-
Sorry I should have made it clear, i did check zoom and other possible accessibility features on the mac, it was my 1st thoughts. To be fair I am not a mac person so maybe even though the owner of the mac and myself feel sure there is not any zoom or desktop font enlargement setting on the mac, we may be wrong.
when you say the text looks fine, do you mean on my site or your demo site? my site has the custom.css nailing the text smaller, so it should look ok.
Yup my sub has expired, thank you for your response’s, like most issues, it has expanded from my original question regarding a way to target browser specific css in gantry 5.
I had assumed my issue was specific to me and something I had changed my end, however it seems after investigation to be specific to the template, as I get the same prob on your demo site.
I was hoping to just tidy my css by targeting safari like I could do with gantry 4, however as you have stated this is no longer possible, I will leave it nailed to all browsers as it seems to look ok, so it does solve my issue.
again, thanks for your time. I would appreciate if you could clarify that for sure the text is fine on your demo site and does not look massive, like in my screen shot using safari 11. This would be handy as I can then remove the custom css and put it down to just something weird on this mac. As I said I am not a mac person so maybe it is just this desktop. I did also use an old laptop with safari 8 which also has this issue, but as you say this is unsupported.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The title is sized in vw units (i.e. the "viewport width") - this is done so that the text sizes scales both up and down dependent upon the width of the viewport (so narrower displays like mobile will have a smaller font and larger display a bigger font). I suspect that you are using a high resolution display on your MAc (probably a retina 5k) this is effectively a much larger viewport size with the main web page centered within it (max 1950px). So, yes, if those case the text will look considerably larger in the slide because the viewport is much wider. The only thing you could do in this case is to use a fixed rem value instead of vw units and possibly also use media queries (so you can set a font size by viewport size).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.044 seconds