On large screens I want to have |A| |B|, on mobile I want
|B|
|A|
I saw here that this is possible via Bootstrap. However I use shopify's liquid. I saw in the theme.scss that there are -push classes - tried the following
<div class="grid__item medium-up--one-half section-header__item">
<h1 class="section-header__title">
{{ collection.title }}
</h1>
<div class="section-header__subtext rte">
{{ collection.description }}
</div>
</div>
<div class="section-header text-center medium-up--push-one-quarter">
<img src="{{collection.image | img_url: '235x235' }}">
</div>
However having the medium-up--push-one-quarter doesn't seem to make any difference (I am new to these css grid magic). I didn't see anything about pull in the theme.scss (which is used in the bootstrap solution from the link above).
Is what I want achievable and if yes, how?
Thanks :)
You can keep current markup and on mobile just change order of blocks using flexbox and rule order:1; for block B, don't forget display: flex; for the container of this 2 blocks
Related
I have html stored in the database and I want to render it on my react page and for that I used
import low from "../css/low.module.css";
<div dangerouslySetInnerHTML={{__html: data}}/>
and this works perfectly. I am also using css modules and I want this html (from database) to detect the css.
I can not use cssFileName.className as it is stored in the database.
For example
data = <div class="news_page_detail">
<p class="news_page_detail">My Para1<br class="Pc_only">My Para2</p>
<p class="news_page_detail">My Para3</p>
<p class="news_page_detail">My Para4
</p>
<a href="/someLink" class="btn-pink-b ovbg ">
<div class="btn-inner">
<div class="ovbg_pink"></div>
<span class="btn-pink-b-txt">My span1</span>
</div>
</a>
Is there any solution so that I apply the css modules here. I dont want to import the css as conventional way because they are interfering with the other css.
Please help.
You can try the html-react-parser library. I have used it and I can style inline my content.
import parse from 'html-react-parser'
<div
style={{ color: 'black' }}
>
{parse(item?.content)}
</div>
I need to use some properties of Bootstrap explained here.
I write the following code in my template:
<div class="row row-content">
<div class="col-12 col-sm">
<h2>Corporate Leadership</h2>
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class"d-sm-none d-md-block">This has to be hidden in small sizes</p>
</div>
</div>
The problem is that it isn't working. I don't know if I had to import some scss class, but the teacher specified that we only need to use css.
First of all, your paragraph element class attribute is missing = sign. Fix it by
<p class="d-sm-none d-md-block"> ... </p>
Secondly, gladly that you included a link to Bootstrap display property documentation. If you read through that, .d-{breakpoint}-{value} means from the {breakpoint} and up, it will display as {value}. So:
d-sm-none -> display as none from breakpoint sm and up
d-md-block -> display as block from breakpoint md and up
Combining those 2 will give you the effect of display none between the breakpoint sm and md.
If you want to hide the paragraph for small screens, you can set its display to none from the beginning, and change it to block for breakpoint md:
<p class="d-none d-md-block"> ... </p>
Fiddle: http://jsfiddle.net/aq9Laaew/104005/
By the way, col-sm class on the <div> is unnecessary. It's only useful when you have more than 1 column and you want them to have equal width.
Are you importing Bootstrap?
Add the following to your <head> if not.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I'm trying to do something fairly simple that I've done many times and I have no idea why it isn't working.
The following is simplified code for what I'm trying to do:
<div class="grid grid--uniform new-header">
<div class="grid__item small-up--one-third">
some stuff
</div>
<div class="grid__item small-up--one-third">
some stuff
</div>
<div class="grid__item small-up--one-third">
some stuff
</div>
</div>
No matter what I put as the second class after grid__item, I cannot get it to become any fraction of the size of the page. Currently, all divs are full-width regardless of me directing them to be one third.
Any ideas?
This is more of a css question than a liquid one. Correct me if I am wrong; I think your code relates mostly to Timber.
Timber is mobile first so you don't have to do small-up what you want is more like small--one-third. If the grid item is only going to be one third you can simply do: grid__item one-third
I have a rendered form in my view which I need to shape regarding the mock-up.
and this is the mock up I shall follow (this is on a mobile device)
this is the actual layout I have in my view
and this is the code in my view so far
<section class="restaurant__nav col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-3 well">
<div class="container">
{{ form_start(form) }}
{{ form_widget(form) }}
{% if app.user %}
<input type="submit" value="{{ 'buy.field' |trans |upper }}">
{% else %}
{{ 'not_connected.text' |trans }}
{% endif %}
{{ form_end(form) }}
</div>
</section>
So I'm really not good with sass (as i'm using it) and css either. But I tried to margin each element but I find it struggling a little.
Any good advice or method to actually do like my mockup without using too much pixels or avoiding that kind of things -> margin-left: 20px?
(just ignore the RÉSERVER I really try to put my form in the middle and element to equal sizing)
thank you
So first of all, if you didn't notice you are using Bootstrap.
It means that to align in left side and in the middle your two main block, you can use class like : "col-md-*". It's the grid concept of bootstrap, basic.
Here is a reference : w3schools
Once block are correctly placed, you have to make the button and input together. Commonly called "input-group". You can implement this by many way, here is a reference : getbootstrap.com
Then for your button, you have some good examples again on w3schools
Once that's done, you may'd like to know that you can center element with :
display: block; // if element isn't natively block
margin: auto;
To know what html element is considered by css as Block or Inline elements, again another reference : w3schools
To end this, you'd probably like to fix the width of the label and input as the same value.
I made you more than an example, my bad, but here it is :
JsFiddle
I need to achieve the following grid(this is for desktop version):
So far I have listed the images, added the separator after each of them and tried to apply this plugin: https://github.com/brunjo/rowGrid.js to the container.
The separator is a pic too, it has to be responsive, on desktop I would need 4 in a row, but on tablet 6. Here my html so far:
<div id="competences">
{% for competence in competences %}
<div class="item-c">
<a href="">
<img src="/uploads/competence/{{ competence.logo }}" alt="{{ competence.name }}">
</a>
<img src="{{ asset('bundles/aeliusfront/images/competencies_separator.png') }}" class="cross_separator">
</div>
{% endfor %}
</div>
Any help, idea would be appreciated, Thanks.
PS. The tablet version has to be full-width, and has to contain 6 images on one row, with the same style(separator)
I had a quick look at rowGrid.js, it looks like its a nice plugin to fit images into a given width, but I don't think you can constrain how many are in each row.
I've written a plugin myself: here. With it you can specify an exact layout in rows and columns which changes at given width breakpoints of the container. This will solve the basic layout grid issue. You might find some other plugins that will also do that, I imagine it would be possible with media queries too, you could for instance set the images at 25% width for the 4 across layout, and at 16.66% width for the 6 across.
The separator just needs some CSS to work properly. My plugin script creates container divs to hold each row. In this case you can do something like this:
.cross-separator:first-child { display: none }
.hs-row-container:first-child .cross-separator { display: none}
You'd need to use css to position the cross separator to the top left corner of the image.
Hope this is clear enough.