I am using a modified version of the following carousel snippet:
http://bootsnipp.com/snippets/featured/tabbed-slider-carousel
My problem is: When you make the screen smaller, the list elements change from horizontal to vertical. I would like to keep it always horizontal but I cant find the point to jump in to change the code.
It's this part of code that keeps them horizontal:
#media (min-width: 768px)
.nav-justified>li {
display: table-cell;
width: 1%;
}
}
You can apply this without the min-width but keep in mind that the contents should be very narrow to keep it responsive.
Related
Codepen - https://codepen.io/spaOyst_/pen/bGWagKG
I am attempting to rebuild a site by going mobile-first but I am struggling with what I think is the responsiveness/resizing of the images or the other sections not resizing when browser width is increased, but the images grow quite large and overlap the section below.
I have tried adjusting the width and height of the images, anchor tags and the section below the images
If anybody has any ideas of what the cause would be, I would really appreciate the help.
At line 246 of your CSS, you've set the height of the lightbox section to 700px and this non-responsive height is causing problems at viewport widths of about 490 - 760px.
It isn't clear to me why you even need to see the height of this lightbox section, but if it's necessary, what about adding an extra breakpoint?
#media (max-width: 490px) {
.lightbox-section {
height: 700px;
}
}
#media (max-width: 760px) {
...
.lightbox-section {
padding: 63px 10px;
/* height: 700px; */ Either comment this out or adjust as needed
text-align: center;
}
...
}
https://codepen.io/panchroma/pen/QWvaMEd
I can see that you've set a pixel height for the index-services section as well but the image links are broken so I can't see if there's an issue in this section as well or not.
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
I am using Foundation. The top-bar (navigation) break out on some 787x676 resolution while resizing the window. I have cut/paste the code but issue was still there. Then i checked on foundation official website top-bar breaks on there website website too. I think there is some bug in foundation. Here is the link/screenshot. Is there any fix to this?
Depends on what you mean with fixing, it breaks when the size gets too small to hold all the content, so one could add a min-width to make sure it doesn't get smaller than that.
Example:
.top-bar {
min-width: 800px;
}
Or you could have it overflow, and just grow in height as content gets dropped below. To do so start with removing:
.top-bar {
height: 47px !important;
}
That line makes the black bar stay as high as it is.
To swap to the mobile bar sooner, look for bits similar to #media only screen and (max-width: 767px) and increase the size to just above where it breaks, example (max-width: 780px)
I am creating a website with a responsive layout.
I have two columns: Sidebar and Content.
The sidebar has 20% width and has a fixed position whereas the Content has 80% width with static position.
How do I stop the content from hiding under the Sidebar when the screen size is reduced?
overflow:hidden
Try adding that
you can do this with media queries
#media (max-width: 800px) {
#sidebar {
display: none;
}
}
When you make something fixed, it's taken out of the document flow. As such, the content should be hiding underneath the sidebar irrespective of whether the two columns widths are set to 20% and 80%.
You can see that here: http://jsbin.com/OQOSEZoF/3/edit (the words '80%' don't show).
So you will probably need to set padding-left: 20% on the content <div> anyway. That may solve your problem on it's own.
If however, if you have other content down the page, such as a footer that is being overlapped by the fixed div, you could use media queries to change styles depending on the screen size.
#media only screen and (max-width : 500px) {
#sidebar {
position: static;
}
#content {
padding-left: 0;
}
}
See the demo here: http://jsbin.com/OQOSEZoF/6/edit
When you resize the result to less than 500 pixels, the text in the footer becomes visible because the sidebar switches to static.
I have a logo with a menu next to it:
This is the HTML:
<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
<ul>
<li>About</li>
<li class="notfirst">Work</li>
<li class="notfirst">Contact</li>
</ul>
</div>
</div>
This is the CSS:
#logomenuwrapper{overflow:hidden;}
#logo
{
padding-right:1.2%;float:left; max-width:100% !important;
max-height:100% !important;
display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
padding-top:0.3225em;
}
I have added some media queries that will make the menu font smaller when screen gets smaller.
At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:
img {max-width:100%;}
A picture of how it looks like on smaller screen (as you can see the logo is too big):
Try changing your media queries to something like this:
#media screen and (max-width: 800px) {
body {
font-size: 85%;
}
#logo img {
width:84%;
}
}
#media screen and (max-width: 400px) {
body {
font-size: 75%;
}
#logo img {
width: 75%;
}
}
and #logo to something like this:
#logo {
padding-right:12px;
border-right:1px solid #ea4a4a;
float:left;
}
Working Example
Note: Be sure to put #media screen and (max-width: 800px) above
#media screen and (max-width: 400px) as seen above.
See Why do the order of media queries matter in CSS? for more information on placing media queries in order.
It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS
It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.
You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).
Also add max-width: 100%; for all images.
img { max-width: 100%; }
#logo {
width: 14%;
// remove max-width:100. not needed.
...
}
See http://jsfiddle.net/weP7u/ and resize the browser
I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.
Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.
I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.
You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.
Further reading:
Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.
Also, check out Trent Walton's short post about type and touch.