I just want to show how the whole page that I am talking about looks like. I do not think it is necessary but maybe helps just in case. So this web page I am working on has 2 Boostrap
div<code>s, one is <code>col-sm-4
and the other is
col-sm-8
covering the whole page by both of these
Div
s. I want to put a
div
inside
col-sm-8
and give it some styling like width and height and background etc. but when I was doing it by inserting "
style
" in
div
tag inside HTML, then it only works for desktop (laptop) but not for mobile screen. Can you tell me how should I select this
Div
inside main
col-sm-8
div for mobile device?
Here is the code for
col-sm-8 div
and the
Div
inside it. Also, I added an
id
for this
div
that I used for another purpose to change the size of
div
but I do not think it can help either. It worked for resizing the
div
itself but not for nested
div
inside this
div
. I really need to understand how selectors and choosing insider elements including
div
or
P
tag or other elements work in general (not just this project) and it is harder for me to understand how selectors work when web page has more elements nested (for easier page with few elements, I understand it but for bigger projects, it is difficult. Maybe this question can clarify it. Here is the code:
<div class="col-sm-8" id="rightdiv " >
<div style="width: 800px; height: 600px ; background-color: lightblue;">
<p style="text-align:center">contact us </p>
<p style="text-align:center">myemail@gmail .com</p>
</div>
</div>
As I said, this is a
div
side by side next to another
div
like this:
<div>
<div class="row ">
<div class="col-sm-4 " id="leftdiv" >
<div id="main">
<span style="font-size:40px;cursor:pointer ;
font-weight: bold ; " onclick="openNav()">☰ OPEN</span>
</div>
</div>
I do not think that is necessary but just in case I can help, here is the entire
div
s code the
col-sm-4
and
col-sm-8
:
<div>
<div class="row ">
<div class="col-sm-4 " id="leftdiv" >
<div id="main">
<span style="font-size:40px;cursor:pointer ; font-weight: bold ; " onclick="openNav()">☰ open</span>
</div>
</div>
<div class="col-sm-8" id="rightdiv " >
<div style="width: 800px; height: 600px ; background-color: lightblue;">
<p style="text-align:center">contact us </p>
<p style="text-align:center">myemail@gmail.com</p>
</div>
</div>
</div>
</div>
My main problem is selecting a
div
inside this
col-sm-8
for mobile device and change the
div
width and height and properties of it:
For this code:
<div class="col-sm-8" id="rightdiv " >
<div style="width: 800px; height: 600px ; background-color: lightblue;">
<p style="text-align:center">contact us </p>
<p style="text-align:center">myemail@gmail .com</p>
</div>
</div>
Thank you!
What I have tried:
I tried to insert a class name for inside
div
in
col-sm-8
and select it by that class and also without any class name by simply selecting "
div
" inside
col-sm-8
. I put both versions here.
I have also tried to use bootstrap media query and none bootstrap:
@media (min-width: 680px)
and:
@media only screen and (max-width : 680px)
Also, I played with
max-width
and
min-width
inside the media queries, but it did not work.
@media (min-width: 680px) {
.col-sm-8.div{
width: 100px;
}
}
@media only screen and (max-width : 680px) {
.col-sm-8.innerdiv{
width: 100px;
}
}