I switched from bootstrap 4 to foundation 6 last week. So maybe it's due to my lack of experience with foundation.
But I have a problem with my breakpoints. The small breakpoint is never working. It is always showing the medium breakpoint. Here is an example of my code and a screenshot of the page I am making at width 320px.
Screenshot of issue
<div class="grid-container">
<section class="section">
<h1 class="text-center">{{ entry.title }}</h1>
<p class="text-center">{{ entry.subtext }}</p>
<div class="grid-x activities">
{% for activiteit in entry.activiteiten %}
<div class="small-12 medium-4 cell">
<div class="activity-card padding-2" style="background-color: {{ activiteit.kleurActiviteit }};">
<div class="activity-card__image text-center">
<div style="background-image: url({{ activiteit.activiteitafbeelding.first().getUrl() }});"></div>
</div>
<div class="activity-card__title text-center">
<h2>{{ activiteit.title }}</h2>
</div>
<div class="activity-card__subtext">
<p class="text-center">{{ activiteit.korteTekst }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
I solved my own question. Had to set viewport meta tag in my html header.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Related
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Closed 2 years ago.
I have a little problem I can't solve myself.
The whole section is inside such container (need to keep it as I align elements vertically with elements from other sections.
I don't have any issue to display in the right position the image inside this container using Flexbox or grid but as you can see in the illustration I need the image always stick on the right but stay in the same position on the left. It's kind of absolute but when I ad absolute I have an issue with the section above. any ideas?
exemple of behaviour : https://www.bain.com/insights/how-to-give-feedback-on-agile-ideas/
<!-- Title & Category Section-->
<section class="container px-4 mx-auto mt-32">
<div class="grid grid-cols-12">
<div class="col-span-8 col-start-4">
<div class="mb-2 text-sm font-light">{{ range .Params.Categories }}
{{ . | humanize }}
{{ end }}
</div>
</div>
<div class="col-span-8 col-start-4">
<div class="mb-4 text-6xl font-bold"><h1>{{ .Title }}</h1></div>
</div>
<div class="col-span-7 col-start-4">
<div class="mb-10 text-2xl">{{ .Params.Subtitle }}</div>
</div>
</div>
</section>
<!-- Hero Area -->
<div class="container px-4 mx-auto ">
<section class="flex flex-row">
<div class="w-3/12 ">
<div class="text-right">
<div class="mb-6">{{ partial "posts/published-date.html" . }}</div>
<div>{{ partial "posts/modified-date.html" . }}</div>
</div>
<div class="text-right">
{{ partial "posts/reading-time.html" . }}
</div>
</div>
<div class="r-9/12">
{{ partial "posts/post-hero.html" . }}
</div>
</section>
</div>
<!-- Article In Brief-->
<!-- Article main content -->
<section class="container px-4 mx-auto">
<div class="grid grid-cols-12">
<div class="">
<!-- Audio Player -->
<div class="">{{ with (eq .Params.Audiopost "") }}
<p>nothing to display</p>
{{ else }}
{{ partial "audio.html" . }}
{{ end }}
</div>
<div class="mt-3 ml-1">
<p class="text-xs">Audio</p>
<p class="font-bold">Listen to the article</p>
</div>
</div>
<div class="col-span-9 col-start-4">
<article class="prose lg:prose-l">
{{ .Content }}
</article>
</div>
</div>
</section>
{{ end }}
and image :
<img src="{{ .Params.Image | absURL }}" alt="{{ .Title }}" loading="lazy" class="absolute">
{{ else }}
<p>pas d'image</p>
{{ end }}
Just Do this
.container {
position : relative;
right : 0;
}
This will make that container align Right . hop this works ..
and Elaborating your problem more will help us to fix your doubt
UPDATE : I answer to my question with a solution who work. See below.
I created a loop that displays posts. Each two iteration a new row is created.
My loop iterate around this list of posts. The button is not considered in this array.
But my problem is that I would like to add a button in the last col.
In the options of my back office I give the possibility to show or not this button. So sometime I don't need to add a last col with this button.
Furthermore I need to add col-md-push-2 on each column on two because I use a Bootstrap grid (even on the column of the button when the button is active in the back office).
I wrote this code who work fine. But I don't know where to add my button.
<div class="group">
<div class="row">
{% for post in posts %}
<div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
<div class="div-for-my-content">
Col content
</div>
{% if buttonIsActive %}
<div class="div-for-my-button">
Button
</div>
{% endif %}
</div>
{% if loop.index % 2 == 0 and not loop.last %}
</div>
</div>
<div class="group">
<div class="row">
{% endif %}
{% endfor %}
</div>
</div>
I don't know where can I add the code for my button. I know that I actually have my button in each row :-(
Example of html I try to generate.
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5 ">
<div class="div-for-my-content">
Col content
</div>
</div>
<div class="col-xs-12 col-md-5 col-md-push-2">
<div class="div-for-my-content">
Col content
</div>
</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5 ">
<div class="div-for-my-content">
Col content
</div>
</div>
<div class="col-xs-12 col-md-5 col-md-push-2">
<div class="div-for-my-content">
Col content
</div>
</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="div-for-my-button">
Button
</div>
</div>
</div>
</div>
I answer to my question with a variant who work and use batch.
{% for row in posts|batch(2) %}
<div class="group">
<div class="row">
{% for item in row %}
<div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
<div class="div-for-my-content">
Col content
</div>
</div>
{% endfor %}
{% if btn_statut == true and loop.last and posts|length is not divisible by(2) %}
<div class="col-xs-12 col-md-5 col-md-push-2">
<div class="div-for-my-button">
Button
</div>
</div>
{% endif %}
</div>
</div>
{% if btn_statut == true and loop.last and posts|length is divisible by(2) %}
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="div-for-my-button">
Button
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
In order to place the button at the right spot, inside an open row, or open a new row you could check if the count of the items inside posts is even or not. Do note, u'd need to do the test twice, once for even and once for uneven
<div class="group">
<div class="row">
{% for post in posts %}
<div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
<div class="div-for-my-content">
Col content
</div>
{% if loop.last and posts|length % 2 != 0 %}
<div class="div-for-my-button">
Button
</div>
{% endif %}
</div>
{% if loop.index % 2 == 0 and not loop.last %}
</div>
</div>
<div class="group">
<div class="row">
{% endif %}
{% endfor %}
</div>
{% if posts|length % 2 == 0 %}
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="div-for-my-button">
Button
</div>
</div>
</div>
{% endif %}
</div>
demo
Grid sistem doesn`t work on mobile: .col-xs-3 is on full screen, col-xs-3 works like col-xs-12, any ideias?
<div class="container">
<div class="row">
<div class="col-md-1 col-xs-3">
<a href="#">
<img src="/.." />
</a>
</div>
<div class="col-md-1 col-xs-3">
<a href="#">
<img src="/.." />
</a>
</div>
<div class="col-md-1 col-xs-3">
<a href="#">
<img src="/.." />
</a>
</div>
...
</div>
</div>
1) If the bootstrap version your are using is 4, In bootstrap 4 there is no xs breakpoint. Instead the xs breakpoint is the default and for other breakpoints you must use breakpoints.
so for example if you want 3 on mobile and 1 on md and above you must say
col-3 col-md-1
2) Please do check that the required meta tags is on the head section of your code i.e.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Are you certain that bootstrap is linked and that you're using chrome on your mobile device?
I have been trying for a while without success.
I have a row with two jumbotron in it, but I can't figure out how to make theme the same height.
I guess that there is paddling issue from the bootstrapp css but I do not know how to overide it ..
here is how it looks:
<div class="row">
{% if project.has_member_responses %}
<div class="col-8">
<div class="jumbotron greenback">
<h4>Welcome to the Project test "{{ project.name }}" Detail page</h4>
</div>
</div>
<div class="col-4">
<div class="jumbotron greenback">
<div class="inner-score">
<h6>Team Score</h6>
<h4>85</h4>
</div>
</div>
</div>
</div>
How can I make the two jumbotron with the same height ?
The easiest way would be to fix the height of the jumbotron
.jumbotron.greenback {
height:200px;
}
I've got a single page of my website which I'm struggling to make responsive. It looks fine on normal screens but is very small and doesn't fill the whole screen on an iPhone. I've narrowed the issue down to this block of code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-6">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="post-preview">
<h2>Blah</h2>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<hr>
</div>
</div>
</div>
</div>
I think I'm not using the grid system properly but would welcome any input!
My source is here: http://pastebin.com/JC6XzTMT and I'm using this as a base: http://ironsummitmedia.github.io/startbootstrap-clean-blog/
Thanks
Make sure the following meta tag is the head of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">