I am currently trying to write some media queries to make my site responsive to other devices. I normally build my sites in Joomla and tend to use modules that are switched off using media queries and mobile modules that are switched on i.e. display: none, display: block..
With the Shopify store that I have built using the Timber Framework, I am not sure if i can implement the same methods, although the timber framework is responsive there are some elements that are not sitting correctly.
For example I am currently trying to sort my header layout for a mobile. Currently for the desktop I have a logo, contact button, search button and cart and this sits the way i need it.
<div class="grid--full grid--table">
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
</div>
Now if I wanted to change the code for a mobile to be:
<div class="grid--full grid--table">
<div class="grid__item large--one-half"></div>
<div class="grid__item large--one-half"></div>
</div>
I'm not sure how i would do this, as with using the "one-quarter" this works well on a desktop screen, but on a mobile it squeezes everything into separate lines and I need to show this on one line.
Hope that makes sense, if somebody could please advise would really appreciate it.
Related
//edited: simplified version now
I am using meteor and want to use a bootstrap grid system in my templates. Unfortunately it just displays the two columns on top of each other as if no bootstrap class was assigned to them at all. I would expect them to be next to each other on the same line
I haven't installed any bootstrap package. (I had but uninstalled it to be sure it is not that) I have only installed other basic standard packages like the facebook login or autoform
Bootstrap itself is working because autoform is styled with it and the alert classes are working in my template for example
There is no other css styling at all in this template yet
The HTML must be well formed as meteor would not render the template otherwise
I tried:
installing the twbs:bootstrap package
installing the mizzao:bootstrap-3 package instead
using more complex bootstrap with container-fluid
which didn't change anything
Bootstrap is installed in the head tag using the code from this link (MaxCDN):
http://getbootstrap.com/getting-started/
this is the entire code for the template
<div class="container">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
As I am very new to bootstrap I assume its a very stupid beginners' issue but I just cannot find it
Hey guys I figured it out!
It seems to have to do with the relatively small size of my screen plus that my developer console was opened. When I used col-xs-6 it worked.
Thanks Anyway!
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-xs-9 col-md-7></div>
<div class="col-xs-3 col-md-5"></div>
</div>
Currently I am working on huisartsendorpsstraat.zoetermeergezond.nl/care-practicioners to toggle the workers divs.
What I am trying to accomplish is to only show a maximum of 9 workers, after that a button displays with the show more workers text.
Getting the button ain't no problem, just added it in the footer of the view, but to make it toggle the divs it ain't just not working.
I made sure a .js file is being called from the theme.php file of the theme.
I ain't no Drupal expert, so I am sorry if I am asking stupid questions here.
Has anyone found a way to toggle the divs created inside a view?
Layout:
<div class="views-row views-row-1 views-row-odd views-row-first"></div>
<div class="views-row views-row-2 views-row-even"></div>
<div class="views-row views-row-3 views-row-odd"></div>
<div class="views-row views-row-4 views-row-even"></div>
<div class="views-row views-row-5 views-row-odd views-row-last"></div>
thanks a bunch
I would recommend using one of these modules:
https://www.drupal.org/project/views_load_more
https://www.drupal.org/project/views_show_more
They both do same thing basicly -> there are some slight differences. Personally i use the first one. It's quick and easy to set up, no additional custom JS needed. Just install, enable, change your views footer to Views Load More and configure. Good luck!
All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)
I am trying to add 3 columns to my ionic navbar and it does not work.
Here is my code:
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
<div class=row>
<div class="col"> Andreea </div>
<div class="col"> Kate</div>
<div class="col"> Andi </div>
</div>
</ion-nav-back-button>
</ion-nav-bar>
Any idea what I am doing wrong?
Would you rather do it as a list (ul, li)?
Thanks!
You may consider using ion-header-bar instead of ion-nav-bar since it allows for quite a bit more customization. (It will work with multiple columns such as those in your code.) You would, however, lose the ui-router integration built into ion-nav-bar which would require you to handle said navigation yourself. See this page for further explanation: Navigating Ionic's Headers. Here's the gist from the article's conclusion:
A standard header bar serves on its own as a pure UI element, ready for extension based on the developer’s needs, but doesn’t come with the advanced integration into Ionic’s router and navigation stack. The nav bar is far more opinionated in its use, but offers a lot of power in return.
I am using the Facebook Like social plugin on my website, and every time the page loads, the plugin stretches the height of the div it is in until the plugin has loaded.
I did define the height of the div that the social plugin is in, but even though the height stayed the same, you could still see the shift. I am also using the Twitter and Google plus social plugins - this makes the shift more noticeable since they get shifted also (shift under the h3 heading).
.socialBookmarks {margin:30px 0;padding:5px 15px;overflow:hidden;}
.socialBookmarks .social-wrap
{display:inline-block;vertical-align:middle;}
.social-wrap .ezimageBox {float:left}
<div class="socialBookmarks">
<h3 class="inline-block">Share:</h3>
<div class="social-wrap clearfix">
<div class="ezimageBox">
(loads twitter social plugin)
</div>
<div class="ezimageBox">
(loads google plus social plugin
</div>
<div class="ezimageBox">
(loads facebook social plugin)
</div>
</div>
</div>
Anyone have any ideas on how to work around this problem? :)
Setting the width and height of the wrapping <div> (in your case, .ezimageBox) usually does the trick for me.
Try this:
.social-wrap .ezimageBox {float:left, width:100px, height: 20px; overflow:hidden;}
Does it still flicker?