Change position of <div> based on media query

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Change position of <div> based on media query

GJim
All,

Not sure if this can be resolved in CSS or HTML - I'm asking in the CSS list
first.

On this page:
www.wyomerc.com/index_test.html

I want the right-hand block ('Essays') to drop below the left-hand block
('Reference') when the media width is less than 768px (an arbitrary number at
this point), but stay to the right at greater screen sizes.  My CSS is working,
at least to the point of changing the size of the block (from 55% to 35%) and
the float, but I'm flummoxed as to how to get the block to drop.

Assistance greatly appreciated.

G-Jim c):{-


______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Change position of <div> based on media query

King's Cat (Cassandra King)
Hi Jim
If I'm understanding your question, you can simply
remove your floats at that media query
so ...
for both of those left and right divs
*float:none;*
and make both
*width: 100%;*

On Wed, Dec 14, 2016 at 1:47 PM, GJim <[hidden email]> wrote:

> All,
>
> Not sure if this can be resolved in CSS or HTML - I'm asking in the CSS
> list
> first.
>
> On this page:
> www.wyomerc.com/index_test.html
>
> I want the right-hand block ('Essays') to drop below the left-hand block
> ('Reference') when the media width is less than 768px (an arbitrary number
> at
> this point), but stay to the right at greater screen sizes.  My CSS is
> working,
> at least to the point of changing the size of the block (from 55% to 35%)
> and
> the float, but I'm flummoxed as to how to get the block to drop.
>
> Assistance greatly appreciated.
>
> G-Jim c):{-
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



--
Cassandra King
Volunteer Coordinator
Coded by Kids
215-600-3405 ext. 700
CODEDBYKIDS.COM
twitter.com/codedbykids
facebook.com/codedbykids

*Contact me if you are a web developer. We are looking for volunteers.*
Volunteer Coordinator
Coded by Kids



http://normavelasco.com
http://cassandraking.net
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Change position of <div> based on media query

Karl DeSaulniers
In reply to this post by GJim
Hi G-Jim,
With the following, you shouldn't need breakpoints unless you really want them for those boxes.
I also restructured your body and wrapper to be more responsive in my opinion.

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffcc;
font-size: 100%;
color: #772B1B;
display: inline-block;
text-align: center;
}

#wrapper {
width: 80%;
height: 100%;
max-width: 1500px;
margin: 0 auto;
display: inline-block;
}

#banner {
background: #772B1B;
clear: both;
width: 100%;
text-align: center;
padding: 0%;
margin: 0;
border: 2px solid #000000;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 100%;
border-radius: 6px;
}

#home {
display: inline-block;
width: 100%;
}

nav {
background-color: #F5DA51;
clear: both;
width: 100%;
text-align: center;
padding: 1% 0%;
border: 2px solid #000000;
color: #772B1B;
display: inline-block;
overflow: hidden;
font-size: 100%;
font-family: helvetica, "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
border-radius: 6px;
}

#mainbody {
text-align: left;
float: none;
vertical-align: top;
clear: both;
display: inline-block;
width: 100%;
}

#maincontent_left40 {
background: #F5DA81;
float: left;
clear: right;
width: 100%;
max-width: 340px;
text-align: left;
padding: 2%;
margin: 1% auto;
border: 1px solid #660000;
border-top: 4px solid #772B1B;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 87.5%;
border-radius: 6px;
position: relative;
display: block;
}

#maincontent_right60 {
background: #F5DA81;
float: left;
clear: right;
width: 100%;
max-width: 555px;
text-align: left;
padding: 2%;
margin: 1% 3%;
border: 1px solid #660000;
border-top: 4px solid #772B1B;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 95%;
border-radius: 6px;
position: relative;
display: block;
}

#wyomerc_contact {
clear: both;
margin: 0 auto;
padding: 1% 0;
background: #FFFFCC;
width: 100%;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 80%;
font-weight: bold;
color: #660000;
text-align: center;
border-radius: 6px;
display: inline-block;
}

#wyomerc_footer {
clear: both;
background: #FFFFCC;
width: 100%;
border-radius: 6px;
display: inline-block;
}

Try that css out. I think this is more of what you are looking for.
Remember to only use a float if you want to take an element OUT of the document flow.
Also, I believe your @media query is set up wrong.

style=" @media ( min-width: 768px){ <br> <br> }"

Should be

style=" @media all and ( min-width: 768px){ clear:both;}"

But again, you shouldn't need this with the above css.
You will want to play with the max-widths to get the desired effect.
I placed in arbitrary numbers in for debugging purposes.

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Dec 14, 2016, at 12:47 PM, GJim <[hidden email]> wrote:
>
> All,
>
> Not sure if this can be resolved in CSS or HTML - I'm asking in the CSS list
> first.
>
> On this page:
> www.wyomerc.com/index_test.html
>
> I want the right-hand block ('Essays') to drop below the left-hand block
> ('Reference') when the media width is less than 768px (an arbitrary number at
> this point), but stay to the right at greater screen sizes.  My CSS is working,
> at least to the point of changing the size of the block (from 55% to 35%) and
> the float, but I'm flummoxed as to how to get the block to drop.
>
> Assistance greatly appreciated.
>
> G-Jim c):{-
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Change position of <div> based on media query

GJim
Howdy Karl,

~~~
Wednesday, December 14, 2016, 5:43:26 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

Thanks to you and Cassandra.  I was (once again, perhaps?) over-thinking the
problem.

This is the bare beginnings of restructuring my site to be responsive.  I've not
addressed mobile devices, nor media-queries, before this.  Long overdue.

> Hi G-Jim,
> With the following, you shouldn't need breakpoints unless you really want them for those boxes.
> I also restructured your body and wrapper to be more responsive in my opinion.


G-Jim c):{-

--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Change position of <div> based on media query

Karl DeSaulniers
Oh, ok. Sorry to jump the gun.
I just saw what was there and my web mind took over.. lol.

Hope it helped. (: ))

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Dec 14, 2016, at 7:18 PM, GJim <[hidden email]> wrote:
>
> Howdy Karl,
>
> ~~~
> Wednesday, December 14, 2016, 5:43:26 PM (USA 'Somewhere on-the-road time-zone'),
> you wrote the message that appears below.
>
> My reply appears here and/or interspersed within your message.
> ~~~
>
> Thanks to you and Cassandra.  I was (once again, perhaps?) over-thinking the
> problem.
>
> This is the bare beginnings of restructuring my site to be responsive.  I've not
> addressed mobile devices, nor media-queries, before this.  Long overdue.
>
>> Hi G-Jim,
>> With the following, you shouldn't need breakpoints unless you really want them for those boxes.
>> I also restructured your body and wrapper to be more responsive in my opinion.
>
>
> G-Jim c):{-
>
> --
> Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
> Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
> My photography: http://www.gjim.com
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/