I have a site that I am trying to make more mobile-friendly (http://realnewsline.com/). The problem I am having is that the three main images at the top of the website get cut off on mobile devices and 1 or two of them become impossible to view. Is there any way I can fix this either in Wordpress or with some CSS? Thanks!
Firstly, your .image-wrap divs have an inline style attribute setting the width to 300px. If you remove that, the images will scale to fit on the device.
To avoid the columns disappearing off the screen when it becomes small, you can make them wrap to become rows. Currently, the .featured-wrap elements have a width set to 33% (via body #wrapper #featured .featured-wrap) and 100% (in .featured-wrap). I would suggest using the display: flex; flex-wrap: wrap; property on their parent element (#featured), giving the .featured-wrap elements an absolute with (say 300px, make sure to remove those other width properties).
Here is some more info on the flex display mode: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ I find it very useful.
Related
So I'm trying to style links on a navigation bar using CSS. When I set the space property between links using a set pixel value, it works perfectly.
padding: 0 3rem;
However, when I replace this line to use the following code for scalability
padding-left: 15%;
It causes a glitch on my screen where it is close together and then expands as I click them. Initial
After various interactions, the links padding slowly expand to the proper size. After some interaction Then when I press a link, (which hasn't been set to anything yet, so it goes back to the home page), the padding goes back to 0. The code works perfectly across devices within console however, just not on the browser as I test it. Does this have to do with React improperly calculating padding percentages?
Not sure why it is doing that. Have you tried using Flexbox?
If you set the parent element to display: flex you can use justify-content: space-around to spread the links out within the parent container.
Then you can add media queries and control the total size of the parent container instead of trying to calculate the spaces in em or rem. Flexbox will automatically space the links evenly.
Here is an example.
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
I have been tasked with making an update to the following site:
http://www.sandysharkey.com/
I would like it to allow an infinite number of images to appear horizontally in each category. You will see right now that the width is hard set in the CSS, which isn't ideal as the image will start tiling underneath each other if they reach that width.
Any tips on how I can modify the CSS to allow for this?
Thanks.
Have you tried white-space: nowrap; ?
Set
white-space: nowrap;
on the image container element. Also add display: inline-block; to your images if you didn't already (or inline).
You should consider using some kind of slider script. People don't like horizontal scrollbars
There is a jquery solution I have created, which allows you to add as many images as you like, and it will adjust the width of the image container dynamically. See here - http://codepen.io/lukeocom/pen/zovbe
For a CSS only solution, you would create a container for the image container. The image container would be auto width, the outer container would have overflow-x set to auto. This css can be viewed in the above demo too.
hope this helps
What I must change to make the navigation bar fixed when screen size under 940px? I don't want to make it responsive. If you resize your browser windows under 940px you will see that scroolbar-x (bottom-scrollbar) appear, but when you scroll it to the right, the navigation bar position still fixed, and some menu won't appear.
Maybe some picture will explain what my problem.
This can't be done in CSS alone.
The example you give (Twitter) has the navbar with fixed position AND fixed size at all screen sizes. Fixed position means that the scrollbars will not affect the position of the navbar, and this is why you can't use the x-scrollbar to see the part of the navbar which, once it's less than 940px wide, is hidden 'under' the right border of the browser window.
So you have to choose, either
Have a fixed position, fixed size navbar which is present at the top no matter how far the user scrolls down and accept that under a small enough screen they won't be able to scroll horizontally to see it all, OR
Have a fixed position, fluid size navbar which adjusts its width to accommodate different screen sizes, which will hopefully mitigate the need to scroll horizontally in the first place, especially if you let it grow vertically if its contents don't fit in one row, OR
Have a non-fixed position, fixed size navbar which will respond to horizontal scrolling but will not be ever-present when the user scrolls down the page.
Effectively, you can't have position work one way in the x direction and another in y.
You can see what I mean by option 2 by editing the following classes in the Twitter page using the CSS inspector:
.global-nav .container {
width: auto;
max-width: 865px;
}
.global-nav, .global-nav-outer {
height: auto;
}
The second selector implements the vertical fluidity for once the contents can't fit in one row.
You can see what I mean by option 3 by making these changes:
.topbar {
position: absolute;
/* ... the rest as is */
}
EDIT
Of course, that it can't be done in CSS doesn't mean it can't be done at all. Here's a jsfiddle implementing that script you mentioned. This uses MooTools as opposed to jQuery, which I normally use with bootstrap.
The fiddle: http://jsfiddle.net/uadDW/4/
Full screen version to better see the effect: http://jsfiddle.net/uadDW/4/show/
(Thanks to #Sherbrow for providing the base fiddle with which I made this one).
Ran into this same problem and was thrilled with the suggested solution, but then I struggled to implement in my own code (Yes, noobie).
It turns out that there's a conflict here with jquery.js, which I need elsewhere in my code.
http://jsfiddle.net/uadDW/83/
/* code as before .. only added jquery.js link */
Remove jquery.js from the External Resources in the above fiddle and you get the original desired behavior. Rats!