CSS not working properly

Topic: CSS not working properly

chirag123 free asked 6 years ago

HelloPlease help me. safari browser V5.1.7 bootstrap 4 not Working please resolve

chirag123 free commented 6 years ago

please replay

chirag123 free commented 6 years ago

.col .col .col

chirag123 free commented 6 years ago

col-md-4 col-sm-12 this code not working in safari

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there Chirag,

Despite the fact I wasn't able to recreate the issue (as all the colorful <code><div></code>s are staying perfectly responsive on <code>Safari 11.0.3 (13604.5.6)</code>, <code>mac OS 10.13.3 (17D102)</code>), I'm staying advised of its existence, as its traits <a href="https://stackoverflow.com/questions/45042811/bootstrap-layout-doesnt-work-with-safari" rel="nofollow">are</a> <a href="https://stackoverflow.com/questions/44099562/how-to-properly-display-bootstrap-columns-on-safari" rel="nofollow">found</a> <a href="https://github.com/twbs/bootstrap/issues/21967" rel="nofollow">all</a> <a href="https://stackoverflow.com/questions/35599949/safari-display-flex-not-working-when-elements-are-25" rel="nofollow">over</a> <a href="https://mdbootstrap.com/support/bootstrap-grid-system-is-not-working-in-safari-browser/">the</a> <a href="https://stackoverflow.com/questions/42820457/bootstrap-3-3-7-grid-system-does-not-work-on-safari-10" rel="nofollow">Internet</a>.

Apparently, the browser treats the <code>:after</code> and <code>:before</code> CSS pseudo-elements as actual elements, oftentimes breaking both flexbox and grid based layouts. This is probably the reason for Bootstrap to offer <a href="https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/" rel="nofollow">limited support</a> to Safari both on desktops (Windows 10) and mobile (Android). As MDB is, <em>nomen omen</em>, based on Bootstrap, we, too, can offer limited support to this browser-specific issue, except of kindly suggesting seeking answers in more general channels, where the problem has been already addressed in respect to environmental peculiarities.

With Best Regards,
Kuba

Please insert min. 20 characters.

Hi there Chirag, Despite the fact I wasn't able to recreate the issue (as all the colorful <div>s are staying perfectly responsive on Safari 11.0.3 (13604.5.6), mac OS 10.13.3 (17D102)), I'm staying advised of its existence, as its traits are found all over the Internet. Apparently, the browser treats the :after and :before CSS pseudo-elements as actual elements, oftentimes breaking both flexbox and grid based layouts. This is probably the reason for Bootstrap to offer limited support to Safari both on desktops (Windows 10) and mobile (Android). As MDB is, nomen omen, based on Bootstrap, we, too, can offer limited support to this browser-specific issue, except of kindly suggesting seeking answers in more general channels, where the problem has been already addressed in respect to environmental peculiarities. With Best Regards, Kuba

chirag123 free commented 6 years ago

hello

chirag123 free commented 6 years ago

Please check https://jsfiddle.net/kv3hydek/12/ URL and Please Help Me

chirag123 free commented 6 years ago

Safari Browser Properly Not Working This Screenshot Check Please http://prntscr.com/ixl419

chirag123 free commented 6 years ago

Yellow and Green Box Default Remove please check

Jakub Strebeyko staff commented 6 years ago

It was checked. We can't do much more about this issue. Closing.

chirag123 free commented 6 years ago

http://prntscr.com/j0tdxc Hello, Please check screenshot link. We have getting issue with Safari Browser responsive . Mozila browser working fine show 4 box as 2 row and than 1 row, but once we check with Safari browser only show 1 row box like table screen have 2 box show and 2 not show and small mobile screen have just show 1 box and other 3 are not display. Please help me to fix this issue. Thanks, Chirag

chirag123 free commented 6 years ago

Please check demo html https://jsfiddle.net/kv3hydek/12/

Jakub Strebeyko staff commented 6 years ago

Hi there, I checked the demo. The issue is rather known, please check 1, 2, 3, 4, here and there. Best, Kuba

Please insert min. 15 characters.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there Chirag, Welcome to the support board! Could you be more specific about the issue? Mainly I mean including a description of what exactly is not working about these bootstrap layout utilities, perhaps aided by a screen-capture or a jsfiddle / codepen. Many thanks. With Best Regards, Kuba

chirag123 free commented 6 years ago

hello

chirag123 free commented 6 years ago

https://jsfiddle.net/kv3hydek/12/ check Please Code This Box Responsive not working in safari please Check And Help Me Please fast replay

chirag123 free commented 6 years ago

Browser Safari V 5.1.7 This Url Past and Check Layout Design. This code is simple but Properly Not Working Please Help Me.

Ollie Vincent pro commented 6 years ago

Looks responsive to me - can you show a screenshot of it in safari - if that is the problem you are having.

chirag123 free commented 6 years ago

http://prntscr.com/ixl419 This Screenshot Check Please this code usage https://jsfiddle.net/kv3hydek/12/ but Properly Not Working Please Help Me i use this URL code https://jsfiddle.net/kv3hydek/12/ but Properly Not Working This Screenshot Check Please http://prntscr.com/ixl419

chirag123 free commented 6 years ago

Yellow and Green Box Default Remove please check and answer give me

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

chirag123

0Support score
1Questions 0Answers 0Snippets