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!
Related
white space on mobile
Top of the page has annoying whitespace that I am trying to figure out how to remove on mobile. I have tried different methods I have researched with nothing working. The container is class:content-intro-wrapper scoped Wondering the best method for reducing this space. Here is a link to the staging site for the page https://staging-digemaya.kinsta.cloud/the-life-changing-power-of-sophrology/
Thank you for your continued help as I navigate every changing issues.
In your main CSS file you have code like this:
#media (min-width: 400px)
{
.content-intro-wrapper {
min-height: 700px;
}
}
use min-height: auto to remove space.
I am still learning so forgive me if I get any terminology incorrect.
I am trying to work on making items fit on screen the way I want and am trying to play with the developer tools in my browser (chrome) to modify existing webpages.
I found a webpage that requires you to scroll horizontally and vertically when zoomed in.
I would like to view the page in a manner so that no matter how much I zoom in (e.g. CTRL + mousewheel up), it does not require horizontal scrolling.
I thought that adding:
overflow-x: hidden;
overflow-y: scroll;
to the body might fix it but it did not.
This is the website in question.
Here is an example from wikipedia that shows the effect I am referring to.
Any and all insight/tips would be appreciated.
The scrollbar is created by #topmenu_lg. When you zoom in, the font size of the letters inside the songs indexes table is increased and it exceeds the available body width.
To visualize this with ease, add this CSS to your page:
#media screen and (min-width: 600px) {
#topmenu_lg {
overflow-x: auto;
max-width: 90%;
}
}
You'll need to come up with a method of displaying those indexes responsively.
Using <table> elements for layout was acceptable... about 30 years ago.
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 { ... }
}
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).
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)