I'm using Slidebars as extension to create off-canvas menus for my site. Custom width can be set using data-sb-width attribute. I have set it to 370px like this:
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="370px"></div>
On mobile i need to change it to 280px, but I don't know if this is possible with CSS media queries. Help would be needed.
As this is an HTML attribute and not a CSS style, you won't be able to directly use CSS media queries for this.
I see several options to explore:
set the data-sb-width using Javascript or jQuery (before you setup the slide bars)
use two slide bars with different widths, and use media queries to hide one or the other (not quite sure the slide bar script will like that)
give the width as a percentage rather than a fixed width, but that may be difficult to control
Related
I made a Navigation bar in the header and have added media queries for mobile devices and table but any thing in middle of this makes the page layout look bad so do i need to add more media queries for all measurements or is there an other way of making page more responsive.
I tried doing it with media queries but was wondering if their is another way around.
You can use libraries like Bootstrap or Tailwind and its easy to learn and use,
or you can just use flexbox or grids in CSS.
Learn more about Flexbox on MDN, using this link.
Learn more about the CSS Grid Layout system on MDN, using this link.
you can use your same media queries but make sure that your sizes are in
em
or
%
in this case everything will go smaller and bigger according to the user's device width.
that's in case you don't want to use a css library which is also recommended.
First, lets keep all simple, is not required to use libraries to build a responsive views
You need to implement mobile first, implement mobile then you can adjust only required elements to other break points (tablet, desktop, ...)
Here you can use break points, flex, grid and positions
Manage all spaces (margins, paddings) with parent container to make less changes, here you can take advantage of flex and grid to centered and spaces between elements the trick is property gap, in this days is not required to use tables to adjust elements
If you are building components dont forget, all components should be reusable, configurable and mantenible
Here is some interesting content:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
So I built this Wordpress page using WPBakery page builder and added a Pardot form to it. On certain browser sizes the form - which looks like it is an iframe element - is larger than the container it's in, so it adds scrollbars to compensate. Is there a recommended solution to keep this from happening? See attached image:
Picture of Pardot form forcing scrollbars
If you're not entirely sure if the form is an iframe element, you could try targeting the form's fields using CSS and using dynamic width and height values such as width: 100%; instead of something like width: 250px;, which will automatically resize your elements to fit the available width. This will take care of the horizontal scrollbar.
For the vertical scrollbar, you could try targeting the scrollbar with psuedo properties to manipulate it's style or hide it altogether. You can read more about it here:
https://css-tricks.com/almanac/properties/s/scrollbar/
It's worth noting though, that this approach isn't highly recommended, due to it's limited support across different browsers and platforms.
However, in the case of this specific vertical scrollbar, it appears to be a height or padding issue on the form's container, so you could target that with #media queries to make it more responsive across devices.
I hope this helps!
The best you can do, is in Pardot, create custom CSS - in Pardot - to accommodate smaller screen sizes.
The biggest issue with this is that the screen size is iframe dependent and not actual browser window width that it's embedded in.
So if you put the iframe into a container that is 600px wide on desktop, that would be a media query of #media (min-width: 600px) in Pardot. You need to adjust the media query for the container size.
If you don't have access to Pardot's CSS tools, you're mostly out of luck.
I have a website that I am working on that has a simple widget that shows the current status of certain systems. The problem I am having is that when the view goes to mobile (iPhone size about) or the screen on a browser is creating the same effect, the rows that have objects in them start to stack and become invisible or cut off. I don't want these to ever stack because the design doesn't make sense that way. Is there a way to make is so something will never stack? I can't seem to get any clues as to how to fix this since the bootstrap choices don't go that small. It seems like it would work if there was a col-xxs-* class or a col-mobile-* class.
You can customize twitter media query breakpoints
so the col-xs-* can start from 200px instead of 480px for example.
here is the link:
http://getbootstrap.com/customize/#media-queries-breakpoints
Edit the variables and download that version. you can also use bootstrap Less to edit these variables in your project as it suites you instead of re-downloading the files every time.
I'm not sure if this helps,
Make sure the viewport is configured correctly:
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
From what I can understand you don't want to stack the divs one below the other in mobile view. Then try to use class like table-responsive that allows the content to appear with a horizontal scroll bar.
Then you have to set the min-width for those columns that you don't want to wrap.
Or white-space:nowrap
The issue that I was having is there was a custom div class that was put into the hosting software's global styling. This class duplicated the idea of the Bootstrap col classes. It started from col-all-12 to col-all-1. The problem is this would override all the other bootstrap styling and make things a certain size no matter what width the screen is. I appropriately adjusted these and it seems to work. I had to rebuild this code from scratch but now it is good!
Thank you to all those that helped and gave suggestions!
I am creating a feature for my responsive website. It consists of an image carousel which contains a caption. On desktop, I am displaying the caption absolutely. The div, which contains a header and paragraph, is positioned on top of the image and takes up a width of 40%.
When the user is using a tablet or mobile I would like to display the caption relatively with a width of 100%. This makes the text appear under the image which is more suitable on the smaller screen sizes.
The two ways of doing this would be to duplicate the code with different css classes - one relative with the visible-desktop class and the other absolute div with the class hidden-desktop. The other way is to use javascript to toggle a class.
I was thinking, it would be great if I could achieve the above using purely css. Something like .desktop .carousel-caption { Is this at all possible.
You could maybe just use media queries and enter your different code in the relevant media query. Bootstrap's media queries are detailed here
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
How can I make the header area not overlap at http://androdevlab.com when viewed in a mobile browser?
You should use media queries. You can read more about media queries here:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can also use plugins like FitText.js - http://fittextjs.com/
Looking at the code for your site in Firebug, the main issue is that the line-height of the line 'A portable lab in NYC of Android devices delivered to your door' is too big. It's currently at '1.8' without a value. Try setting it to a smaller value of maybe 1em or 1.25em. Likewise for the nav-primary li a class.
Also, the width of the nav element is defined as 980px so on any device, this would be a fixed value. Maybe you can try setting a % or em based value.
If you need to change many elements for the mobile version while keeping the #screen CSS the same, you should use media queries. Makes things much easier to handle.
you should use various responsive design tricks. like setting the: meta viewport tag, #media queries adjusted css. specifing the margin and sizes in the header with % or em instead of px of other set sizes etc. you could use js libraries like syze and projects like html5boilerplate to help you with this.