Change Div class Col-4 to Col-6 depending on Media Query for particular div
I am trying to change div class fom Col-4 to Col-6 using media query for iPad device whose WH is 7681024
my div is like,
<div id="maintitle" class="col-4"> @*<a class="nav-link py-0" href="/Home/Index">*@ <a class="nav-link py-0" href="~/MyDevices/Index"> <img src="~/Images/logo.png" width="75" /> <strong class="h4 text-white"> This is Title </strong> </a> </div> for design i am checking from chrome developer tools its is working fine on iPad Pro but in iPad title breaks to second line. if i change col-4 to col-6 it works fine in iPad but not in iPad Pro.
i tried by using media query like,
in Bootstrap.css
i just go to any media query that is predefined for this width like,
@media (min-width: 768px) { .rtl .text-md-right, [dir="rtl"] .text-md-right { text-align: left !important; } .rtl .text-md-left, [dir="rtl"] .text-md-left { text-align: right !important; } } As i want to chnage particular for this div i assign id to it "maintitle" and after making changes in above media query
@media (min-width: 768px) { .rtl .text-md-right, [dir="rtl"] .text-md-right { text-align: left !important; } .rtl .text-md-left, [dir="rtl"] .text-md-left { text-align: right !important; } #maintitle .col { width: 50% !important; } } But it is not working Hopes for your suggestions
First time i am working with media query
thanks
