Hello I'm building this site on wordpress: MY SITE. The website is built in Wordpress everything looks perfect. However the follow us along with the 3 icons when you look at it in the monbile (shrink the browser) it gets really huge and crazy. Not sure how to fix it I tried everything.
Right now the header is split up into 3 sections each with a class ".col.-xs-12 .col-md-4" That way when its mobile they stack up on each other. In the first section (the follow us) I have another div with col-xs-4 I believe.
I know this is probably an easy fix. Thank you!
This is the rule from main.css that's causing the problem.
.col-md-4 .social-fixed { width: 45% }
It makes the icons blow up to be 45% of the width of their parent elements. You probably want to assign the width to the parent class, i.e. .col-md-4 or find some other way to resize the container.
Did you try adding col-xs-4 to them?
<div class="col-md-4 col-xs-4 widget1">...</div>
<div class="col-md-4 col-xs-4 widget2">...</div>
<div class="col-md-4 col-xs-4 widget3">...</div>
Related
I'm only a few months old in web development and i know my code is pretty simple but i have tried everthing i know but it is not working. The text and image are not aligning side by side if i increase the width of the image to 100% . also i want the image to go off screen. here is my html code (removing the images since i cant post it).
My css code just contains width=100%; and overflow:hidden;
<div class="row">
<div class="col-lg-6">
<h2>BE HEALTHY</h2>
<p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>
</div>
<div class="col-lg-6">
<img class="image" src="" alt="bowl of food">
</div>
</div>
I do not have enough reputation to comment, so I will post this as an answer.
Just to be sure, you're using col-lg-6, so that will put the columns at 50% after large screen and above. If you're looking at a small screen, you'd need either col-md-6, or col-sm-6, or just col-6 if you want 2 columns all over.
If you already know that, then add the class img-fluid to your image. That should work out. This is the Bootstrap class to make images responsive. Bootstrap Responsive Images
I tried it on the attached JSFiddle link, make sure to expand the display box for the -lg breakpoint to take effect.
I am building this website for a friend of mine. She asked if i could make a slider of the header pics. I have tryd making it full width but it looks different in firefox and chrome and i dont know why.
the url is xx
The problem is that in firefox it has a margin/padding left of a lot, instead of 0. Tried adding !important, but no difference. In chrome it is nearly full width, but still not totally. I think im looking over something obvious :( help is highly appreciated.
The first problem is that you created a row as a container of the slider only. The row adds margin-left: -25px and margin-right: -25px. If you wanna use such a structure, you should put a col-xs-12 (if you're using Bootstrap 4 use col-12) inside row.
After that, you will see a fullwidth slider.
As a consequence your structure will be like that:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
...
slider structure
...
</div>
</div>
</div>
This should fix your problem in Firefox too.
I am not sure if you defined the width of the parent element carousel-example correct. You can extend your bootstrap.css for .carousel with the full width:
.carousel {
width:100%;
position:relative;
}
BR
webbolle
I have a gallery made with Bootstrap 3 by a grid of 4x2, this looks perfect until the width is less than 767px and higher than 430px. It should look a single centered image but looks like this.
I have already tried with margin: 0 auto; and there have been no changes.
I hope you can help me, thanks.
Add 'col-xs-12' to your bootstrap wrappers of the images, making it look like this:
class='col-md-3 col-sm-6 col-xs-12 retrato isotope-item'
I have used Bootstrap 3 for a couple of projects recently and love the way how simple it can work. Nevertheless I now have some questions where I don't really know how to use it. If I'm having a few divs which are tiled, I'm wondering how the best way would be to change the order, or the position within the grid on different breakpoints. I made a simple visualisation to explain my problem:
On the left hand side, you see the state on large desktops, and on the right hand side how it should look like on the next smaller breakpoint. The problems I currently have are: How would I handle the blue div on .row1, to have the red div on .row2 next to it on the right in a new row.
And on the breakpoints, would it be possible for the red div, to move to another row?
I'm searching for a Bootstrap/CSS only way, but if it is definitely not working without JS/jQuery, I would appreciate those suggestions too.
Hope you get my point. Thanks!
Edit: Related image to my other question in #Danko 's answer, which was how to switch tiles on different breakpoints.
You will need to manage the same logic but don't slice your desgin in two rows, just one:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-12 col-lg-6 O"></div>
</div>
</div>
Check this DemoBootply
I search the whole questions but I cannot find the solution, so here is my problem.
I have a forum webpage using forumengine theme by wordpress. In the main page and the category page everything is in order, sidebar appears where it has to be but when I click and enter the tread, the sidebar on the left moves to the bottom of the page. I cannot find the solution.
Can you tell me where is the problem?
You can see the problem I've mentioned at http://forum.banaisbul.com/Baslik/herkese-merhaba/
Your html structure is messed up, particularly for using bootstrap.
Solution 1(Ideal)
The div containing the following class col-md-3 marginTop18 thread-discuss-right hidden-sm hidden-xs needs to be put under the <div class="row"> that you have given so that grid will work.
Solution 2
The col-md-9 margin that you have given should be removed and add to the immediate parent div.
Add to the row element in your "container main center" the class "col-md-9".
<div class="row col-md-9">