I have a page http://spitzpomeranian.com/fr/?option=com_rsform&view=rsform&formId=5
with 2 div:
- one on the left display iframe youtube,
- one on the right display a form
On desktop view it is fine,
but when I reduce my window to see the responsive view, the form on the right doesn't go under my youtube video, but it goes behind!
Any CSS expert could explain me how can I get that done please?
I search solution o google and tried many things without success.
Thanks in advance.
It seems as your page is already using Twitter Bootstrap (I've viewed the source of the page) but you're not taking advantage of Bootstrap's responsive column layout.
You currently have these 2 elements:
<div class="div_image_homepage_left"></div>
<div class="div_image_homepage_right"></div>
I recommend removing the current css properties you already have for them (i.e float, display, position, etc) and using the following:
<div class="row">
<div class="div_image_homepage_left col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div class="div_image_homepage_right col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
This will make them take 50% on large and medium size (6 columns out of 12 columns) screens and 100% on small and extra small screen sizes (12 out of 12 columns).
Read more about Bootstrap grid system here
Hope this helps.
Related
Fairly new to design and coding, and working on my first freeCodeCamp project. Anyway, I have a row that's divided into three medium columns like so:
<div class="row">
<div class="col-md-4 pb-3"></div>
<div class="col-md-4 pb-3"></div>
<div class="col-md-4 pb-3"></div>
</div>
The pb-3 class is just to add some padding below each item for mobile. Anyway, each column has a YouTube video embedded in it. On desktop, the padding on the outside edges of the outer columns is just right, but there's too much padding BETWEEN the columns, presumably because each column is providing its own padding, so the padding is doubled. I've tried tweaking the padding to fix this, but the problem is that if I give different columns different padding, the YouTube content is resized and looks wonky.
Here's the link to the full CodePen if anyone wants to take a closer look.
Thanks!
~Seth~
Is it possible to remove the middle two breakpoints in Bootstrap 3 and have the browser visually "scale/shrink" the page, so in those breakpoints you don't have to scroll left or right to see the page?
Basically, I have a design that I want to be responsive, but only be responsive for the small breakpoint and the large breakpoint, but I don't want a viewer to have to scroll left or right to see all the content.
Here is an example that I'm working on that doesn't work. I've tested on the iPad and I have to scroll around left and right to see the content:
http://matthewtbrown.com/test/myprojects.html
Just checked your code via Developer Tools, you're using container-fluid for the parent container.
When using container-fluid you should use row-fluid instead of row.
We use row when using container and row-fluid when using container-fluid.
It should be something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>
Is it possible to create a page in bootstrap with slider on only left half of the page and some text on right half of the page?
Will the website/page still be responsive?
If there is any such theme already, please suggest. (WordPress or bootstrap responsive)
That is not a problem at all. I suggest you take a look at the bootstrap documentation, specifically at the Grid section. It describes how to build the sites grid, which (by itself) will be responsive. If the column content behaves nicely when the viewport size changes, depends on the content you put in there.
For the slider, take a look at slick slider which is responsive.
Here is a quick bootstrap grid example for 2 columns next to each other that should give you an idea of how to do this:
<div class="container">
<div class="row">
<div class="col-md-6">
Left Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
</div>
I have a problem with bootstrap.. In last project, everything was fine, but now, I really don't know what to do.. I used customize for customizing bootstrap (3), selected only grid system & responsive utilities (the same way as in last project).
Columns: 4
Grid gutter width: 16
Tablet: 720px + grid-gutter
Desktop: 980px + grid-gutter
Large desktop: 1140px + grid-gutter
After a few hours of seraching I decided ask here.
URL: http://jebe.rosaweb.eu/ Why the last column goes on new line? It should not do this :( I know, if I set padding to 0px it will be fine, but I need that padding.. It should pass one row..
Does anybody know where is the problem?
Thank you and I hope you understand my english
Your code is wrong, you're using
<div class="col-md-1">
aa
</div>
when it should be
<div class="col-md-3">
aa
</div>
and if you want to scale columns based on screen size, you could use something like:
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
aa
</div>
This means your columns will take 3 "grid columns" (out of 12) on large screens, 3 on medium screens, 4 on small screens and full width on extra small screens (tablet and smaller)
for more information, take a look to Bootstrap Grid System
I have a page that looks great in high resolution (1st screenshot) but in low resolution (second screenshot) row-fluid is being pushed over (so it's not in line with the VG-ES list item). Is there a way to fix this?
My Markup:
<div class="container">
<div class="row-fluid">
<div class="span8">Calendar</div>
<div class="span4">Event info</div>
</div>
</div>
This is how it should look (1280 x 720):
This is how it looks in low resolution (1152x720 or lower)
If the issue is that you want the calender to stay in the same position relative to the top menu, double check that the menu is also in a container > row-fluid grid. If it is, then try forcing the calendar to align left.
Good luck!
from the little experience I had with bootstrap this is just simply the way it is. bootstrap has some resolution key points defined through css media queries at the resolutions you mentioned.
you can edit the css media queries to meet your own needs.