I have been at this problem for hours.
I am looking to make my website responsive, I have started with mobile first and am working on creating it for the desktop.
My issue:
when I edit the .col for tablet or desktop, the columns will respond but they will not be on the same row.
When the breakpoint hits for the desktop I would like my picture to be to the right of the menu, and the content to be to the right of the picture.
if I make my
#menu{float:left} //under CSS desktop breakpoint
then i will get my desired result but the menu will lose it's column width.
https://jsfiddle.net/Lrtpjhh7/
any advice? I feel as if I am on the right track but something is not working.
In order to achieve the desired outcome you need to:
Wrap whatever you want displayed near the menu inside a col-9 wrapper.
Add float:left to your [class^="col-"].
Here's your fixed fiddle.
Related
Desktop view looks like this:
Mobile view like this:
My product catalog (woocommerce) images do not fit full screen. where/how can I modify this? I think it might be theme related. I want to remove that right padding on desktop view, and the middle/bottom/top padding on mobile, basically the elements taking full width, sticking to each other. I have looked for days, tried to play with the console and on/off settings but no luck. Would greatly appreciate guidance here :)
if you are using bootstrap use col-md-4 as a class of every div
use whatever you want from 1 to 12 instead of 4
for help try to post with code .
thanks. happy coding
I've been trying to make a responsive Nav-bar that is on top when Mobile and on side when Desktop.
The problem is that to achieve this I'm not sure what is the correct approach regarding the Rows and cols. Because on mobiles, I have a Row with col-x-12 for top-nav and another Row with col-x-12 for the content below.
But if i want to achieve a side by side cols (col-2 and col-10) for dekstop sizes, I have a problem regarding the 2 rows. They can't be side by side.
Also I tried to make 1 row and 2 cols, for navbar (col-md-12 col-lg-2).
For content (col-md-12 col-lg-10), but i don't know if its safe to have 2 cols-12 inside one single row, So, what would be the correct approach for this responsive navbar? thanks!
I may have a solution for you.
Try to make two div, one is only displayed in desktop resolution (it would contain the sidebar), and one is displayed in mobile resolution (would contain the topbar)
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Take a look at that https://getbootstrap.com/docs/4.3/utilities/display/
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
I have 5 bootstrap buttons placed side by side on the same line. They look fine on desktop. Screenshot-
But on smaller viewport, the buttons are placed over two lines without any spacing between the lines. As a result they look odd. Screenshot-
I am wanting to keep some vertical spacing between the lines on responsive view so they look similar to this-
I want to make it so that there is always a line spacing there irrespective of the number of buttons on the same line or total number of lines on responsive view.
Is there any way to do this with bootstrap?
Thanks
try using this button{margin:10px;} Give margin where you want
Check This fiddle
jsfiddle.net/rzdcxgr5
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)