I am using the Pictorico theme on my site (http://linktick.com/). When you resize the window, for whatever reason, there is an additional block of blue to the right of the content that you can horizontally scroll to:
However, when you look at a WordPress demo of the theme (http://pictoricodemo.wordpress.com/) and you resize it, this additional blue block does not appear - no horizontal scrolling option is available at all:
How can I make my site behave like this as well?
#media screen and (max-width: 885px) {
.screen-reader-text { display: none; }
}
Related
My shop page back-end is using WooCommerce + elementor.
The cart page is boxed to avoid a messy layout look on larger screens:
the top section is stretched to full width:
Issue:
The woo notice that appears when you update your cart quantity or remove an item from the cart appears as a boxed view (as it coincides with the width of the "cart" section - which is set to boxed- 1200px)
How can I have "just the woo notice set to full width (no matter the screen size) without needing to make my whole shop page full width?
*I tried to set the wrapper to (width: 100vw), but no luck
video sample: https://streamable.com/euksnx
Thank you for your help.
after looking into your website, I noticed where the issue lays. The .woocommerce-message has a width of 100vw. This is why it sticks out of the parent. If you simply remove this, it will show as expected.
If this is styling you didn't apply and can't remove, overwrite it in your child theme with the following class
.woocommerce-notices-wrapper .woocommerce-message {
width: 100%;
}
As this is WordPress and sometimes your CSS doesn't want to overwrite, you can always resort to using !important for width. However, I think it's better if you try to see if it will work without it.
Image with 100VW what it is now:
Image with 100% class
To stretch the banner full width as requested in the comments, add the following CSS:
.woocommerce-notices-wrapper .woocommerce-message {
margin-left: calc(50% - 50vw);
width: 100vw;
}
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 read somewhere that it can be done with Elementor (reference), but can it be done any other way?
Now it's set on 600px, but I want it triggered at 1200px. Is this possible?
Yes, you can use the CSS code to hide and show the menu on a specific device size.
You can use the following CSS code.
#media(max-width:1200px)
{
.YourDesktopMenu{
display:none !important;
}
.YourMobileMenu{
display:block !important;
}
}
This CSS code helps to hide the desktop menu and show the mobile menu for the lower screen then 1200px.
I need to create a tagline under the logo for Squarespace OM, and I can't create a text block there so I created one lower on the page and used CSS to position it near the top of the page. However, the tagline only stays in place at 1816 width screen size and above even though I am using CSS that I thought would work to keep the tagline under the logo at non-mobile screen sizes. At other screen sizes the tagline appears above the logo/navigation. (At mobile size, tagline can go away.) The site is here: https://shara-karasic-rkbg.squarespace.com/
How can I make sure the tagline stays in a fixed position under the logo at tablet and desktop sizes?
The CSS I used is:
#media only screen and (min-width: 1024px) {
/* Add your custom styles here for Desktop */
#block-yui_3_17_2_2_1516902907408_4620{color:
#5b01a6;position: relative;padding: 0 0 0 5;bottom:2300px;}
}
#media only screen and (max-width: 1023px) {
/* Add your custom styles here for Tablet */
#block-yui_3_17_2_2_1516902907408_4620{color:
#5b01a6;position: relative;padding: 0 0 0 5;bottom:2300px;}
}
Thank you!
The right position for your text-block html would be inside of the <div id="lower-logo"> Tag. But I think you are not able to change the html structure in Squarespace, are you? If not, the only solution I could think of is Javascript.
$(document).ready(function() {
$("#lower-logo").append('<p class="tagline">Merging mind-body...</p>');
});
You can then easily position / style your new element with CSS and it will always stay next to the logo.
I realized that a way around not being able to easily add a tagline directly below the logo/navigation in Squarespace OM was to delete the template's header image (header image is right below the logo/navigation) and instead add a new image to the main content area using the image block, with a markdown block above it that contains a formatted tagline. Then I just had to remove some extra space above the markdown block using some custom css. Reducing the margin-top on #page did the trick to tighten up the extra whitespace:
#page {margin-top:13px}
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 { ... }
}