I have been searching for a while trying different methods to try and remove white space between my images on the home screen on my mobile version. It only occurs on my mobile version. My url for the site is below:
https://athleteperks.co.uk
I also have a thin small white gap between two images on my home screen which wold also be great to remove. It would be great if someone could help.
thanks
If you are referring to the bottom 5 images before the footer there is padding that needs to be removed on mobile state 767 like so:
.fw-row .blog-grid-items {
padding:0;
}
.blog-grid-items .blog-item.col-sm-sf-5 {
padding:0;
}
Adding the above CSS makes the last 5 images full width on mobile and eliminates white space.
Also removing the below CSS eliminates the small 1px gap between the two images on your home screen:
.row:not(.fw-row) .spb_swift-slider .swift-slider {
margin-left: 0;
}
Edited Answer
The below CSS needs to be added to your stylesheet in order to remove the white space from the images on mobile:
.spb_text_column, .spb_content_element {
margin-bottom: 0;
}
/* Mobile media query */
#media (max-width: 767px) {
.swift-slider-outer {
height: auto !important;
}
}
In order for the above media query to work you must have in your head file the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
here is the code if you want to rid out the space in between the 5 images in the same row:
.col-sm-sf-5 {
width: 25%;
padding: 0px;
float: left;
}
.row:not(.fw-row) .spb_swift-slider .swift-slider {
margin-left: 0px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.blog-grid-items .blog-item {
margin: 0 0 0px;
height: 330px;
padding-top: 0;
}
If you want to modify the design only for a mobile version, with resolution 1024 px, add this code and put inside this code your new classes above.
#media only screen and (max-width : 1024px) {
.classname {
/* other styles here */
}
}
Related
In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:
This assignment is all about media queries and getting your site to be
responsive. We will be using the website The toast again for this
assignment. You will be laying out two columns for the content area.
When the screen size hits 960px the right column must disappear. The
articles in the left column must adjust to the width of the screen.
The images must get bigger and fill the article at 960 px as well.
At 760 px the support us button, love the toast text and the social
media must disappear.
In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:
#media only screen and (max-width: 960px) {
.main {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
}
However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?
EDIT: Guess I should mention that yes, I am indeed using SASS in the project.
Here is the styling I have for the columns before I started the media query:
.main {
width: 90%;
display: flex;
min-height: 200px;
margin: 0 auto;
//column for main-page content
.bigColumn {
width: 800px;
height: 100%;
margin-top: 20px;
margin-right: 9%;
margin-left: 13%;
}
.adColumn {
margin-top: 20px;
position: relative;
min-height: 120px;
}
}
I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.
#media only screen and (max-width: 960px) {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:
/* All screens 960px or less */
#media only screen and (max-width: 960px) {
.main .bigColumn {
width: 100%;
}
.main .adColumn {
display: none;
}
}
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
I’m using WordPress and SiteOrigin (plugin) and it's North theme to create a t-shirt printing website and have a particular issue with aligning a few sections of a product in the product page.
Here is the link to the particular page:
http://7dollarprintedtshirts.com/product/custom-t-shirts-for-kids-and-adults/
Basically, I want the designer to be on the left with the product info on the right and the product details on the bottom.
I’ve revised the CSS with the following code so the page is full width:
body.responsive .container {
width: 100%;
max-width: 1500px;
}
The content seems to be aligned correctly using the following code:
.woocommerce.single #content div.product div.entry-summary {
margin-top: 0;
width: 54%;
float: left;
padding-left: 50px;
}
but when I resize my window so I can see if everything aligns correctly, it doesn’t. :(
At one point, the product info on the right moves to the below the designer which is what I want but now it’s too close to the bottom edge of the designer, but when I resize the screen even smaller, the product info seems to squeeze to the right of the designer section.
Please see attached screenshot:
http://7dollarprintedtshirts.com/wp-content/uploads/2017/04/now-text-is-squeezed.png
I tried revising the CSS but it doesn’t seem to end up the way I want.
What can I do so each part of the page
• Designer
• Product info
• Product details
Is spaced and aligned correctly and no matter what size the window is, everything will be spaced and aligned so it looks sectioned correctly?
Any help would be very much appreciated!
Please note that the custom CSS code has been deleted so I can start from scratch. :)
Update:
Ok, I entered the following CSS Code:
#media (max-width: 768px) {
.fpd-product-designer-wrapper:after {
content: '';
display: table;
clear: left;
}
}
.fpd-product-designer-wrapper {
margin-bottom: 50px;
}
.woocommerce div.product .summary {
width: 38% !important;
}
.woocommerce div.product .summary {
float: right;
clear: right;
width: 48%;
}
#media (max-width: 945px) {
.woocommerce div.product .summary {
float: left;
clear: left;
}
}
#media (max-width: 768px) {
.woocommerce div.product .summary {
float: left;
clear: left;
}
}
It seems to seperate the sections how I want depending on the width of the screen but when I get to lower than 944px for the product summary, it floats to the right when I believe I set it to the left. How can I correct this because what I entered above isn't working.
Update again!
I entered the following CSS code to make the designer at the top, the product summary in the middle and the product details at the bottom:
.fpd-product-designer-wrapper {
margin-bottom: 50px;
}
body.responsive.woocommerce.single #content div.product div.entry-summary {
width: 100% !important
}
Is this formatted correctly? When I resized it, everything seems to be aligned correctly but it's always nice to have input. :)
Looking at your site, the container holding the shirt stills floats left at screen size 768px and the container holding the summary is set to "float: none"
To fix this, at screen width 768px the div that holds the shirt image should not be floating. You can achieve this by either clearing the float. I hope this helps
#media (max-width: 768px) {
.fpd-product-designer-wrapper:after {
content: '';
display: table;
clear: left;
}
}
OR
#media (max-width: 768px) {
.fpd-product-designer-wrapper {
float: none;
}
}
Hi dear developers and designers,
I've got a problem in editing my wordpress woocommerce based template.
I use the woocommerce theme named Neighborhood from ThemeForest in my website.
all I want to know is how to edit the width of Sidebar & Content ,( Shop Products or Post)
the theme is full width and fully responsive, so the percentage of showing would be great not a fixed pixel.
percentage of thor ratio or whatever
for example this page of my website http://aryagostarafzar.com/shop/digital-painting-pack2
you see the sidebar in the left which is about 1/3of whole width.
i could change the sidebar percentage of showing by putting this code is css :
.left-sidebar {
width:20%;
}
but the content does not automatically fit the smaller sidebar and the extra space remains free and not used by content nor sidebar.
please give me a short css code to set both.
thanks
Looks like the site is using an old version of the Bootstrap grid. The sidebar width is being determined by the ".span4" class on the tag. You'd need to increase or decrease that span class to make it larger smaller.
That will also increase or decrease the body width size. The spans must add up to 12. i.e
span4 and span8
You can ready more on it here: http://getbootstrap.com/2.3.2/scaffolding.html
Here is my bootstrap codes in styles.css
I don't find " .span4 "
other .span are available but not defined by percentage, is defined by pixel
how to edit them my friend
* #Custom Bootstrap Classes
================================================== Support for columns width sidebars
==================================================
.span-third {
width: 193px;
}
.span-twothirds {
width: 407px;
}
.span-bs-quarter {
width: 100px;
}
.span-bs-threequarter {
width: 340px;
}
#media only screen and (min-width: 1200px) {
.span-third {
width: 236px;
}
.span-twothirds {
width: 504px;
}
.span-bs-quarter {
width: 120px;
}
.span-bs-threequarter {
width: 420px;
}
}
#media only screen and (max-width: 979px) and (min-width: 768px) {
.span-third {
width: 145px;
}
.span-twothirds {
width: 310px;
}
.span-bs-quarter, .span-bs-threequarter {
width: 342px;
}
}
#media only screen and (max-width: 979px) {
.span-third {
width: 100%;
}
.span-twothirds {
width: 100%;
}
.span-bs-quarter {
width: 100%;
}
.span-bs-threequarter {
width: 100%;
}
}
I'm trying to make a website that is essentially a few vertically positioned slides. I had been hoping to make a responsive design so my "slides" are appropriately resized on larger screen sizes or are padded appropriately in strange dimensions. Here is my LESS file setting the appropriate dimensions:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
//============================================================
// Dimensions for each section for standard desktop screen
//============================================================
#home {
#media screen and (min-aspect-ratio: 16/10) {
height: 92%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 57.5vw;
}
}
#about {
#media screen and (min-aspect-ratio: 16/10) {
height: 108%;
width: 160vh;
padding: 0 calc(50% - 80vh)
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 67.5vw;
}
}
#experience, #hobbies, #contact {
#media screen and (min-aspect-ratio: 16/10) {
height: 100%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 62.5vw;
}
}
//============================================================
// colors
//============================================================
#home {
background-color: black;
}
#about {
background-color: #488BFF;
}
#experience {
background-color: #B3B3B3;
}
#hobbies {
background-color: #FF7F35;
}
#contact {
background-color: #803A7D;
}
It seems to work for the most part when I run it with a simple html file with the 5 divs (home, about, experience, hobbies, contact). However, on chrome, a bug seems to occur while I resize. Sometimes, my webpage simply disappears, replaced with some black/gray cross. If I resize very quickly (rapidly resizing the window), a checkerboard appears or even some other webpage completely on a different tab. I tried testing resizing another webpage also using media queries, and this problem did not happen. Is there something inherently wrong with how I'm using media queries?
EDIT: Sample images showing the strange problems:
After a long and arduous chat session, we have worked out a fix for the bug. Here is the summary:
What's Wrong
For some reason, Chrome has a problem rendering large divs. As of now, I'm not sure where the bug lies exactly, but a simple example with 5 100% width/height divs causes this strange problem. Here is a JSFiddle with this example. The bug only manifests outside of a frame, so you must copy the frame source into its own webpage.
From what I can gather, something strange is happening under the hood in Chrome's rendering engine on Windows, which causes the strange black & gray crosses to appear when resizing a window.
The Fix
The fix isn't very elegant, but it works. Simply apply a transform:rotate(0) on each of the divs to force gpu acceleration. With this, the cross vanishes. Here is the resulting JSFiddle that applies this fix on the previous example.
TL;DR
When Chrome isn't rendering the pages with the graphics card, strange things occur. Use transform:rotate(0) on broken items to force graphic card rendering.