change the location of a div for responsive

[jonnyfreak]

i have a div for a cart logo and total price that sits in the top corner of the screen


#layout #main #cart {
background-color: #000;
height: 30px;
width: 20%;
padding: 10px;
position: fixed;
top: 0em;
right: 0em;
}



<div class="cartText" id="cart"><a href="../SS16/cart.php"><img src="../images/trolley.png" width="25" height="25"></a> <?php echo $XCart_numItems = sizeof(${$XCName}["contents"][0]) ?> Item(s) | &pound; <?php echo $XCart_sumTotal; ?></div>

what i want to do is when the website is scaled down for this box to site full width across the bottom of the screen

[Beverleyh]

Change width to 'auto' (or 100%) to make it span the full width.

Change vertical position to bottom:0; (remove 'top')

Also check your syntax because CSS selectors should be comma separated (#layout, #main, #cart {...} )

If you need more help, please post a link to the page.

[jonnyfreak]

Change width to 'auto' (or 100%) to make it span the full width.

Change vertical position to bottom:0; (remove 'top')

Also check your syntax because CSS selectors should be comma separated (#layout, #main, #cart {...} )

If you need more help, please post a link to the page.

sorry i wanted to keep as it is on larger screen just to change location when on mobile devices

[Beverleyh]

You'll need to modify the CSS inside your media queries. I don't know which way you're working - mobile first or desktop first - but you should be able to work out which of your media queries hold the 'mobile' stuff from the behaviour of other elements. You can also investigate the elements in your developer toolbar for further pointers - F12 in most browsers.

Like I said before though, if you need more help, please post a link to the page, otherwise all we can give you are general suggestions.

[jonnyfreak]

You'll need to modify the CSS inside your media queries. I don't know which way you're working - mobile first or desktop first - but you should be able to work out which of your media queries hold the 'mobile' stuff from the behaviour of other elements. You can also investigate the elements in your developer toolbar for further pointers - F12 in most browsers.

Like I said before though, if you need more help, please post a link to the page, otherwise all we can give you are general suggestions.

ok here is a sample http://www.jonfortis.co.uk/movediv/indexSS16.php

[Beverleyh]

Going back to what I said earlier, you need to put your CSS modifications/overrides inside your media queries for mobile sizes - like you're already doing for the side menu, but for this div.
#cart {
width:auto; /* or 100% */
bottom:0;
top:auto; /* set this line back to default */
}

You shouldn't need other over-specific CSS selectors either (#layout #main #cart) - an id is as specific as it gets (barring inline styles).

[jonnyfreak]

Going back to what I said earlier, you need to put your CSS modifications/overrides inside your media queries for mobile sizes - like you're already doing for the side menu, but for this div.
#cart {
width:auto; /* or 100% */
bottom:0;
top:auto; /* set this line back to default */
}

You shouldn't need other over-specific CSS selectors either (#layout #main #cart) - an id is as specific as it gets (barring inline styles).

i added that to side-menu.css but it didnt appear to work ?

[Beverleyh]

I can't check anything because I'm on mobile but I would say it's because of specificity; If you've kept the chain of 3 id selectors in the desktop stylesheet/media queries, but only used #cart in the mobile CSS, the desktop definitions with greater specificity will always be overriding the lower specificity #cart selector. What I meant before is that you shouldn't need the over-specific selectors *anywhere*. Try changing all occurrences to #cart so that specificity is the same wherever it's mentioned. If that doesn't work, maybe all the selectors *are* needed (due to overrides elsewhere in the cascade) so change them all to #layout #main #cart

TIP : Whenever you're up again CSS angst like this, you should head for the developer toolbar - that's F12 in most browsers. If you're unsure how to use the tool bar, look for a tutorial on Google that shows you how to inspect an element and live-edit CSS in the style pane. It's pretty straight-forward though so playing around with it sans-tutorial will probably be enough, with a bit of trial and error. Learning how to use the developer toolbar will really help you troubleshoot CSS issues.

[jonnyfreak]

I can't check anything because I'm on mobile but I would say it's because of specificity; If you've kept the chain of 3 id selectors in the desktop stylesheet/media queries, but only used #cart in the mobile CSS, the desktop definitions with greater specificity will always be overriding the lower specificity #cart selector. What I meant before is that you shouldn't need the over-specific selectors *anywhere*. Try changing all occurrences to #cart so that specificity is the same wherever it's mentioned. If that doesn't work, maybe all the selectors *are* needed (due to overrides elsewhere in the cascade) so change them all to #layout #main #cart

TIP : Whenever you're up again CSS angst like this, you should head for the developer toolbar - that's F12 in most browsers. If you're unsure how to use the tool bar, look for a tutorial on Google that shows you how to inspect an element and live-edit CSS in the style pane. It's pretty straight-forward though so playing around with it sans-tutorial will probably be enough, with a bit of trial and error. Learning how to use the developer toolbar will really help you troubleshoot CSS issues.

would it be best to start again and give the div a class <div class="cart"> then make all the css .cart rather than #cart

[jonnyfreak]

would it be best to start again and give the div a class <div class="cart"> then make all the css .cart rather than #cart

i have just tried that and that hasnt worked.

[Beverleyh]

Look at the source order of your stylesheets - and again, check the developer toolbar because it shows you that the CSS for mobile is being overridden in the css.css stylesheet

You have the desktop styles after the mobile ones so they're always in effect - don't forget that normal CSS cascade rules apply so pay attention to source order.

Try switching the order of stylesheets or put mobile media queries for this bar inside the css.css file, at the bottom.

Also, check the syntax of your css.css file because there are <style> tags in there that shouldn't be.

[jonnyfreak]

Look at the source order of your stylesheets - and again, check the developer toolbar because it shows you that the CSS for mobile is being overridden in the css.css stylesheet

You have the desktop styles after the mobile ones so they're always in effect - don't forget that normal CSS cascade rules apply so pay attention to source order.

Try switching the order of stylesheets or put mobile media queries for this bar inside the css.css file, at the bottom.

Also, check the syntax of your css.css file because there are <style> tags in there that shouldn't be.

i have moved the the css.css above the side-menu.css and cleaned out the unneeded <style> tags. what is happening now it the div is always appearing on the bottom.

[Beverleyh]

Have you tried this?
Try switching the order of stylesheets or put mobile media queries for this bar inside the css.css file, at the bottom.

[jonnyfreak]

Have you tried this?
that has worked thanks for you help