I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
Related
First of all thanks to anyone who responds. I'm sure this is a no brainer for a CSS wizard but for me it's definitely not something I have experience with, hence the question.
On my website I've got all of a sudden a horizontal scroll appearing on mobile (which was NOT there before and no CSS was edited for that).
In addition to checking on my phone, I also check via an emulator# http://mobiletest.me/ (seems like it's there on tablets too). Does anyone know how to fix this?
Not sure if it's some WP plugin or theme working weirdly with the newer version of WP, but basically here's the CSS file's contents (it's pretty big).
https://justpaste.it/8v9yy (should be easily searchable & readable). I wanted to put it here but there's not enough space.
Thanks!
While there may be other issues causing that problem, such as elements extending beyond the body, you can solve the problem by hiding overflowing elements.
body, html {
overflow-x: hidden;
max-width: 100%;
}
Note: If elements within the page are overflowing they will be cut off. So, you must ensure that they are not overflowing by doing something like below:
.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}
Update:
After looking through and testing out the CSS, it looks like the website behaves how you want it to when you make the following changes:
#media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
.typology-section {
/* this makes all the text fit in the view */
width: 80%;
/* the ad is wide, so this cuts it off at a certain point so no need to scroll */
overflow-x: hidden;
}
}
I found this out by using Firefox's dev tools to pick an element (ctrl+shift+c when you're in Inspect Element panel), namely the one going out of the view, clicking on it, and editing the CSS in that panel to find what was causing the problem.
Original Answer
I tried it out, and it looks like the ad at the top of the page is what's taking up a lot of horizontal room and forcing a horizontal scroll bar. Can you try and manipulate the ad with CSS? If so, I would do something like this:
#media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
.advertisement {
max-width: 300px;
}
}
This makes it so that when the screen is a certain width, a max width is applied to the ad.
By the way, if you're using Chrome, you can see the mobile view by opening Inspect Element (ctrl + shift + i) and then toggling the device toolbar (ctrl + shift + m). Just wanted to throw that in there to ease the amount of work in checking the mobile view!
Is it possible to hide a div with (or without) Bootstrap 4 if the screen width is over/under a specific value? Does it need javascript for that?
More specifically, I'm looking for hiding a specific text (that I find useless on a mobile screen). I tried classes like "hidden-sm-up" but I couldn't make it work. Sorry if it's a basic question...
media queries in CSS are what you are looking for.
.mydiv{display:block; /*default behavior*/}
#media only screen and (max-width: 400px) {
.mydiv{display:none; /*hide div on all screens with 700 and lower width*/}
}
(try dragging the divider between js and outpuut block)
https://jsfiddle.net/qaabhmou/
more you can find here:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I am trying to set images as links to an exact spot on a background image. I need the image links to stay in the same space on the background image and be responsive.
I am using html and css, and have little knowledge of any other programming language. I am trying to use a background image that is fixed and four images as links with absolute position values, but the image links move around when I change the browser window. Any suggestions? Thanks!
I can give you 2 ways to solve this as i used them before:
1: Use all measurements in %:
That is actually not responsive, but falls into the concept of fluid layout.. wich means it always fills the whole that it can on whatever size.
2: Use media queries:
that is considered responsive, because at each key sizing it will change your positionning:
#media (max-width: 1200px) {
.element {
/*INSERT POSITIONING STYLES HERE (POSITIONING[top, right, bottom, left])*/
}
}
.element {
/*INSERT DEFAULT STYLING HERE (COLORS, DISPLAY MODE, VISIBILITY, OPACITY)*/
}
REMEMBER: in order to position to work, you have to either set the element to position: fixed/absolute/relative.
Hope i helped out. In case of doubt, just ask me!
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
I'm quite new to web development and jQuery, so please bear with me.
I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.
This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.
The CSS I've added to the default nivo-slider.css is:
#media screen and (max-width: 31.25em) { /* 500px รท 16px */
.slider-wrapper{
overflow: hidden;
}
.nivoSlider {
left: -50%;
width:200%;
}
.nivo-caption {
margin-left: 25%;
width: 50%;
}
}
Thanks very much!
Just using CSS, you could add a one-off type class to that particular image, and throw that into your #media query:
.my-one-off { left:??px; margin-right:??px }
You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).
$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example
Or
$('img[src*="one-off.jpg"]').addClass('my-one-off');
I looked at nivo-slider3.1. In order to select a particular image only and move it left you could use the following in css:
img[src="YourSpecialPic.jpg"]{
left:50px !important;
}
You can also set a custom animation for one particular slide with the following img attribute within the HTML:
data-transition="slideInLeft"
You can sub any attributes to get the desired effect, but I think this will do the trick.
NOTE:
Depending on what effects you are using will determine whether or not that messes up the animation (e.g. The slicing animation becomes screwed up after performing the left move. The slideInLeft animation seems to work fine.).
I don't have a quick or easy solution for fixing all the animation effects for that one particular slide, but I'm sure a conditional statement within the javascript could achieve it (I'm just not smart enough for it).