How to unhide display:none

Mobile
1

Hi

I gave up on a previous page and started anew, but alreday have problems:

http://pintotours.net/Work/Sights/Test.html
a) how to unhide dsplay:none for div at @media screen and (max-width:640px) { in html/css

b) at the same break point I remove the right sidebar, but the left and the mnain part start to separate…

Help!

Thank you

2

Set display:block in your media query (later on in the CSS) to override the display:none.

3

No offense but this page is sorta set up weird. However to fix this problem, for 640px and less, I’d unset the width:19% (e.g. make it width:auto) on #left, and then on #box, change that margin-left from 130px, to 190px (190px matches the min-width)

4

Hi RyanReese

It’s not the page; it’s me!

many thanks. The second point is sorted out. It helps if you know what you’re doing!

However, the first is not. I tried display:block before and it does not work. At 640 I want to bring in #horizontal and I’m lost as to what to do…

5

I think I’d get a swift #banhammer from the staff if I started insulting you though :stuck_out_tongue: .

I don’t see how #horizontal impacts my suggestion though. From the looks of it, it will be above the two columns and below your header?

For your media 640px query, add this in.

#left {
  width:auto;
}
#box {
  margin-left:190px;
}
6

You tell me why #horizontal is not being affected. Hint: Spelling.

@media screen and (max-width:640px) {
#horizonal{
   
display:inline-block !important;
}
}
7

Oh, no!..

many thanks

While I have your attention, now that I got the misspelt orissontel sorted out and the thing is actually appearing, my next probelm id to balnace the 3 divs nicely .margins:auto does not seem to work,

It is only a starter to see how something like this could take over from the left sidebar, if I also took it out.

It looks awful, but before I get the paintbrush out, I’s better centre the divs nicely.

8

You are still in development and pretty early on I’d say. Please take a look at these 3 column examples and consider mimicing your HTML and structure code to match.

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

You will have less headaches in the long run. I know you may not want to do this but structurally, it’s probably for the best.

9

Hi Ryan

Thanks. I promise I will look. But right now and at my third attempt I must get this out within a day or two. It is, infact, a very close copy of the main pages in the site.

I know they started as a beginner’s attempt and were patched up over the last 18 months with kind offerings from online friends.

if you could help me sort out the #horizontal I will be forever grateful.

10

Have you fixed hte spelling mistake in your CSS? Once that’s fixed, then #horizontal should be showing for you.

11

Yes, it’s working fine now. My next problem is to centre the divs in the #horizintal so that they look more attractive. The actual content will change but first I need them to stay in touch with the decreasing screen width, i.e. as the screen width goes down the divs in th #horizontal should adjust themselves to stay centred.

Is that possible in Hyml/css ?

12

To technically center them you could just remove the floats on the #logo, .dest5, and .dest6 elements, make #horizontal display:table instead, and give #horizontal text-align:center;

13

Great! Amazing!

Just one more: is it possible with css to make the left sidebar keep company with the middle section, as the latter gets narrower and increases in length?

14

Ya knwo what, remove the width entirely on #left (this means you don’t need to reset it in the media query)

To answer your question, sure! Just make #box not have an auto left margin. Make it 190px just like in your media query (also it removes the need for your media query to change the left margin of it.)

Make sense?

15

Well…

One thing at a time: I removed the width on #left from the main code and from media query, and now the #box is diving beneath the #left, as before, plate tectonics style!

16

Steps:

  1. On #box make the left and right margins 190px
  2. Remove the width on #right (width:19%)
  3. Remove the width on #box (width:55%)

I’m basically just converting your code to Pauls examples that I linked to :wink:

17

Hi

I take it that you are talking about the main code, not the queries.
Right?

let me add that at this stage I am only trying to understand the nechanics of the page, because I have more or less already decided to get rid of the #right altogether and turn the #horizontal to mimic the navbar that I took aout in the queries

18

Correct :slight_smile: . The queries are used to fix weird quirks that you see as you go through the different viewport widths.

19

BEAUTIFUL!!!

Now, for the partnership between the centre and the sidebars (onle the #left is of importance.

(If you don’t mind…)

PS _ the only problem is that when the #right goes the #box is not filling the empty space

20

Perhaps you need to clear your cache. This is what I’m seeing.

1232×853 282 KB