Media query width is not applying to col-md class? - html

Media query width is not applying to col-md class. Below is my code. I am using latest version of Bootstrap.
<div class = "col-md-8 article-container-fix">
<div class = "articles" >
<article class="clearfix">
<header>
line 1
line 2
line 3
</header>
</article>
</div>
</div>
CSS code
#media(max-width: 1199px){
.article-container-fix {
width: 400px;
margin-left: 1em;
background: black;
color: white;
}
}
Except width, all three other properties apply to this class ".article-container-fix" but not that "width: 400px". I don't know where I am missing anything.

I would suggest you to try it with a bit less max-width than 1199, something like 720px to see if it works or not. Other way to output this would be the following
HTML:
<div class="col-md-8">
<div class="article-container-fix">
Content here!
</div>
</div>
And use the same CSS you used before. It's complicated with bootstrap to actually get some things in place the way you want it, and for this, it could be interfering with pretty much anything. Hopefully this will work for you.

ITS Due to you have write your article-container-fix class with col-md-8 class. col-md-8 is a Bootstrap framework class. By default there is a default width given in bootstrap.css.
There is two way to overcome from this problem:
Either you have to write !important in your media query like width: 400px !important;
Or
You have to re-positioning your css in your <head> tag, include most last your responsive.css in your <head> tag.

Related

Making HTML <div> tag not take the entire length of the page

I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap

How to make links clickable in Bootstrap via mobile?

I have a website that works fine normally but when in mobile mode, all the links (with exception of the navigation) are no longer clickable. Does anybody know how to change this? I'm not too familiar with Bootstrap though I've tried to troubleshoot as much as I can.
Here's the website: http://dominiquehall.com/dom/
Thank you in advance if anybody can help.
Remove the following code from your theme css file (agency.min.css) at line 477:
div {
height: 100%;
}
Or you can override that property by adding the following code in your custom css file:
div{
height: auto !important;
}
The problem in your code is with the property of div having height 100%, thus overlaying all the links. The div containing the image of a person playing guitar is covering the links in mobile mode. The images are hidden but the div still exist.
Another hack is hiding that particular div in mobile mode.
#media screen and (max-width:991px)
{
.target_div{
display: none:
}
}
In your case the target div is:
<div class="col-lg-4 col-md-5">
<div class="fixed">
<img src="./img/dom1.jpg" id="photo" class="hidden-sm hidden-xs" alt="">
View Resume
Equipment List
</div>
</div>
Just add a class name to the above div and a display as none for mobile devices and your site is good to go.

Modifying height of inherited bootstrap style

I am a CSS newbie and I have to change some code where it looks like they are inheriting styles from bootstap..
<style>
.thumbnail{display:table !important}
</style>
<div class="thumbnail">
So thumbnail is a cell inside a table and I need to change the height and weight of this cell, any suggestions on how I can do that? I am not seeing any height or width attributes for that style?
Thanks.
Do not modify bootstrap classes just add new class like this
CSS
.thumbnail-custom{
background-color:red !important;
}
I think even !important is not needed
HTML
<div class="thumbnail thumbnail-custom">
...
</div>
If you are using LESS
.thumbnail-custom{
.thumbnail;
background-color:red !important;
}
And HTML
<div class="thumbnail-custom">
...
</div>

Using data attributes with media queries

I have a page I am setting up so that it looks the image below on the widest resolution, however on smaller resolutions the page setup will change what images are being displayed on screen, so I wanted to use a media query and data attribute. Only problem is:
I am not sure if I am using the data attribute correctly, and
I have no idea how I would target the <p> tags with a selector so I can use :after to display the image of the badges after the text.
This cant use any jquery/jscript as a requirement so it's kind of a pain.
Demo, it should be configured properly with bootstrap. (The image is linked correctly, but not being displayed due to the attr.)
Sample HTML:
<div id="main" class=" container">
<div class="row">
<div class ="col-lg-6 " id="badgeBox">
<div class ="col-lg-12" data-test="<a href='http://www.va.gov/' target='_blank'><div class='badgeContainer'><img id='va_badge' class =' badges img-responsive' src='http://i.imgur.com/BAbUq6v.jpg'alt='Veteran Affairs Badge'></a></div>"> </div>
<span><p> U.S. Department of Veteran's Affairs</p></span>
</div>
</div>
</div>
Sample CSS:
.badgeContainer {
width: 30%;
}
#media screen and (min-width: 1200px) {
//some selector that targets the p tag// :after {
content:"("attr(data-test) ")";
}
}
I think setting content from a data attribute would work like this.. However, the data-test needs to be inside the p and you'll have the larger problem of encoding the HTML content inside data-test..
#media screen and (min-width: 1200px) {
p:after {
content: attr(data-test);
}
}
A more Bootstrap friendly approach would be to use the included utility classes (http://getbootstrap.com/css/#responsive-utilities) to only show the image link at larger resolutions use visible-lg.
Here's a demo with both approaches: http://bootply.com/94916

Stop a child div from creating padding, but only on one div id in css

I am using Joomla to create a website at the moment and I am having problems with a certain module getting padding applied to it. The problem is with Joomla you have classes for the modules that I cant seem to override. The layout is as follows :
<div id="rt-page-surround">
<div class="rt-container">
<div class="rt-container-bg">
<div id="rt-drawer">
<div id="rt-header">
<div class="rt-grid-6 rt-alpha">
<div class="rt-grid-6 rt-omega">
<div class="thumbnail_scroller">
<div class="rt-block">
<div class="module-content">
<div id="jdv_iscroll122_wrap" class="jdv_iscroll_wrap " style="width: 620px; height: 110px; ">
<div id="jdv_iscroll122_inner" class="jdv_iscroll_inner horizontally" style="width: 32766px; height: 110px; left: 0px; ">
</div>
The module I am trying to modify is thumbnail_scroller, the problem is it is getting 15px of padding from rt-block. If I set rt-block to padding:0px this gives the desired affect to thumbnail_scroller but it also applies the zero padding to everything else on the page as the rt-block class is shared with numerous other elements on the page (this is the way the template is coded by the author). What I want to do is apply zero padding to rt-block but only for the thumbnail_scroller module.
I have tried
.thumbnail_scroller {padding:0px !important}
but this seems to do nothing, anyone any ideas on this one ? :-)
div.thumbnail_scroller div.rt-block {
padding:0;
}
This specifically targets divs with the rt-block class that are inside a div with the thumbnail_scroller class.
You can be hyper-specific by trying something within your CSS like:
div.thumbnail_scroller div.rt-block {
padding: 0px;
}
That directive will then apply only to a div of class thumbnail_scroller IF it sits within a div container of class rt-block.
(Edited for div order - re-read your question.) {:¬)