two divs side by side that collapse to top and bottom when on mobile?

[denvercardonations]

I am currently going through my website and trying to make it as mobile friendly as possible, removing tables and using divs/css.I think reports show 40 percent or so web surfers now surf on mobile devices. Would

<div>left-top</div>right-bottom<div></div>

be the easy way for a simple moblie structure for content to collapse to meet the narrow requirements of a phone?

 

[hoangvu]

I am currently going through my website and trying to make it as mobile friendly as possible, removing tables and using divs/css.I think reports show 40 percent or so web surfers now surf on mobile devices. Would

<div>left-top</div>right-bottom<div></div>

be the easy way for a simple moblie structure for content to collapse to meet the narrow requirements of a phone?

Are you wanting to make 2 divs fixed at top left and bottom right when viewing on a phone?

Could you share a screenshot to understand which you are wanting to talk to...I could not imagine what you wanted to do.

 

[denvercardonations]

Sure, I will drop a link to my main page, but will unhyperlink it so the new guy doesn't get seen as a spammer: www.denverdonate.com

In the middle of the page there is a content section next to a sidebar, when you view it on the phone they sit next to each other squished.



MOD EDIT: @DenverCarDonations
Do NOT hesitate to provide a link to your site when you are asking for assistance. Blatant
self promotion is NOT allowed, but in this case, you are not promoting anything, you are
merely asking for some assistance. I am sure ALL mods would agree... As such, I have
altered this post to include a direct link. Thanks for respecting the rules, but in this case,
an actual link would have been just fine... I assure you.

[ edited by @Developer ]

 

[Harry P]

Harry P

Integrating Bootstrap or Foundation CSS responsive framework and replace your DIVs with Bootstrap's Divs ( cols and rows ) then your site will be in full responsive design.

If you create codes by yourself then it will consume you more time on making your responsive web templates.

 

[elcidofaguy]

Harry above has hit the nail on the head with that! Indeed that is what I would do with using bootstrap as it is really easy to setup responsive design without the headaches of writing the code yourself... Besides bootstrap also provides a very professional/polished look and feel to your website.... Why waste endless amounts of time and effort when you could be up and running within a few short hours?

 

[denvercardonations]

Are there any benefits to bootstrap over foundation? This is the foundation framework I uploaded, I have to say, that does exactly what I need: [URLnf="https://www.denverdonate.com//test/test/index.html"]https://www.denverdonate.com//test/test/index.html[/URLnf] This is the screenshot from my iphone 6+ with that exact pages, it loads super fast and when I turn the phone it rotates all blocks into place. I could just use this template and markup my html inside it and add my module calls I think.

 

[elcidofaguy]

elcidofaguy

Oh wow that is one massive screenshot! It nearly poked my eyes out lol.... You should have mentioned that you're using framework in your original post as it was not clear... As long as you are using a framework then its all good ;-)

Personally I dont see much difference between bootstrap vs. foundation - they both look very similar with regards to default styling etc... Yeah go for the one which is the easiest noting that you need a fluid container at the top level and you may want to use pull/push to move the default mobile layout i.e. place a specific div on top of another versus the left to right being top to bottom default... i.e. That comes in handy cases such as a left side bar sitting on top of the main content when you want it to be the other way round...

 

[denvercardonations]

Sorry for almost poking your eye out elcidofaguy :crybye:

I had to get a few hours sleep since I posted that update on the Foundation sample code being uploaded. But, before I start working in it this morning I want to ask you one more thing, because it is easily something that send me into panic mode when I start making large changes to a website, most of all the main landing page. I know it sounds a little weak sauce to ask, but when Google returns to spider the page and sees sweeping changes to the markup, large amounts of internal links removed and images too. because I have toooo many links on the main page, and you sort of also reminded me that a person on their iphone or droid probably do not want to scroll for 5 minutes through the crap I deem relevant will Google drop or reassess my rankings, giving me a large drop in traffic?

 

[elcidofaguy]

elcidofaguy

No worries buddy ;-) If you have too many links on the home page and you get rid of them - then I reckon thats a good thing as the links left on the home page will get more link juice...!

In otherwords remove your irrelevant ones and keep it focused on what pages you want to rank i.e. one click away and the riff-raff ones to be tucked away one level deeper if that makes sense.... I would also re-organize it so that those 2nd/3rd level ones then link back to the pages which you are targeting for improved rankings (see those page/posts as helpers)....

Below is an example of a silo found online which of course is open to various ways to implement noting I would link it back to the main silo page and also adopt a few cross silo ones...

Another thing you can do with regards to user experience is to hide the links/additional content in a way that makes it easier to read the entire page i.e. use tabs, sliders, expanders (show/hide div) etc.... There are tons of resources online - here is an example of one I just found discussing how to make the [URLnf="http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites"]hamburger menu[/URLnf] that you see these days on many mobile sites...

Another example [URLnf="http://ageekandhisblog.com/css-how-to-easily-hide-content-on-only-mobile-or-only-desktop"]here[/URLnf] shows you how to show/hide content for mobile vs. desktop noting that the code is still on the same page and hence from a search engine perspective it has no impact to crawling as it is still accessible...

In my opinion I would say you're on the right track with aiming to remove the clutter regardless of mobile/responsive design!

Hope that helps!

 

[denvercardonations]

Thanks for that explanation and the diagram, much appreciated, I will start working on a menu structure keeping mind mind what you have said and making sure I 301 any dead links that might crop up! You have also mentioned something that I think explains something that was on my mind today, actually confusing me. The website I am building is to help some local charities, so one of the natural keywords I ranks #3 for was a non money making non competitive keyword: Driven to Donate it is a charity program in Denver that helps connect donors with charities. #1 and # 2 were those organizations and me #3 pulling up the rear, that was fine and dandy, it works as a support element for the content marketing. However, as of today this is not the case, my landing page, the base url, doesn't rank in the top 5 or 6 pages! The only change I can come up with that goes along with what you elude to, is maybe I totally washed that pages link juice out....