At first I noticed the font sizes are large on the site and uncomfortable inside each article
I tried customizing the CSS file
To write a code that makes fonts smaller
for paragraphs and sub-headings
H2، H3
I tried some articles and found that the fonts have really changed and become smaller
But the problem is not all the fonts in some articles, the problem remains the fonts are in large sizes and have not changed
What is the cause of the problem and how can I set all the fonts in all articles smaller than the original size
See the picture that shows you a check mark
This has the fonts changed successfully, while the other picture has the font not changed
Then see also the code and a picture of where the code was modified
body {
font-size: 16px !important;
line-height: 35px !important;
}
.default_logo,.logo-sticky,.logo-mobile{
height: 110px !important;
}
.fullwidth-wrapper {
padding: 15px 30px;
}
#media only screen and (max-width: 1200px){
.wgl-theme-header .wgl-mobile-header {
display: block;
height: 120px;
}
.default_logo, .logo-sticky, .logo-mobile {
margin-top: 10px;
}
h2 {
font-size:24px !important;
}
h3 {
font-size:20px !important;
}
h4 {
font-size:18px !important;
}
}
Can't change the size of all fonts in wp
Related
I cannot increase product gridview image size. Though I have increased list view image size by going to Admin->Extensions->Extensions->Themes and thereby editing default store theme. Here I can edit Product Image List Size. But here is no mention of Product Image Grid Size.
I do not know where to edit product image grid size. The List size has been increased but of no use because when someone opens the product, the default view is Grid View which is not increased. Though the List Size is increased but someone cannot see bigger image unless one does not click the List size because the default view when someone opens a product is grid view.
How can I increase image size in grid view? I am using default theme with OC 3.0.2.0.
Please note that there is this CSS property (from bootstrap) that does not allow the images to be larger than the product box:
max-width: 100%;
The product box in the grid view has some col class like this:
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">
You can remove those classes from the twig file, like this:
<div class="product-layout product-grid">
Or you can add this CSS code:
.product-grid {
width: auto;
float: none;
clear: none;
}
At the bottom of stylesheet.css to override the bootstrap column width:
catalog/view/theme/default/stylesheet/stylesheet.css
Then you may need to clear the theme caches and the browser caches to see the change.
Well, but an opencart doesn't provide any other image settings.
You could find out by looking into your stylesheet.css file, and possibly find different layout settings for product-list and product-grid Sections.
Then, you could add some min- or max-height/width or then a 'fixed' height/width image size Values to the individual Sections in the right places, to find out if it works. Still the responsive Function might still resize the images to a smaller Value, if no min-value has been set, but not to a larger one, and only, if a screen resolution gets smaller.
That's all I can do for you, and the time invested only depends on how complicated
the Theme Coder worked. And depending on how it's been coded, it might not be
possible either, without a fundamental rewrite of the sections involved. Don't forget to make a backup copy of the stylesheet first! But don't worry, you cannot ruin anything. And make sure, to always first RESET your entire Cache Systems, as well as the browser Cache, before testing for results.
Sample of such a Stylesheet section:
/* product list */
.product-thumb {
border: 1px solid #ddd;
margin-bottom: 20px;
overflow: auto;
}
.product-thumb .image {
text-align: center;
margin: 10px;
}
.product-thumb .image a:hover {
opacity: 0.8;
}
.product-thumb .image img {
margin-left: auto;
margin-right: auto;
}
.product-grid .product-thumb .image {
float: none;
}
#media (min-width: 767px) {
.product-list .product-thumb .image {
float: left;
padding: 0 15px;
}
}
.product-thumb h4 {
font-weight: bold;
}
.product-thumb .caption {
padding: 0 20px;
min-height: 60px;
}
.product-list .product-thumb .caption {
margin-left: 230px;
}
#media (max-width: 1200px) {
.product-grid .product-thumb .caption {
min-height: 210px;
padding: 0 10px;
}
}
#media (max-width: 767px) {
.product-list .product-thumb .caption {
min-height: 0;
margin-left: 0;
padding: 0 10px;
}
.product-grid .product-thumb .caption {
min-height: 0;
}
}
I have a banner code that shows banner image big enough correctly on my laptop screen but when I open the same web page on my mobile phone, it shows the banner very small in height making it narrow to read. how to resolve this issue so that I can make the banner remain the same size for laptop screen as it is currently now, but much bigger for the mobile screens?
HTML CODE:
<?php
echo "<div class=custom-banner><img src=https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif></div>";
?>
.custom-banner {
background-position: center center;
position: relative;
box-sizing: border-box;
display: block;
z-index: 999;
}
<div class=custom-banner><img src=https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif></div>
I'm using WordPress, so maybe it inherits some CSS properties from style.css of WordPress. Currently, the banner image size is 1950 x 75.
You need to set img width to 100% so it would be responsive. and css selector needs to be .custom-banner img
.custom-banner {
background-image: url('https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif');
background-position: center center;
background-size: contain;
position: relative;
width: 100%;
height: 75px;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 800px) {
.custom-banner {
background-image: url('https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
height:400px;
}
}
<div class=custom-banner></div>
Also you need to set another img with lower height for mobile this photo is not good for responsive mobile.
you can use cs like this for mobile and background image would be changed when device width is lower than 400px. For Example:
#media only screen and (max-width: 400px) {
.custom-banner {
background-image: url('https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
}
}
I made a comment section for my website and I have a button that allows you to edit your comment which reroutes you to another page. I have a margin set up so content doesn't get hidden behind my header or footer but now I can't seem to find a way to get the background color to stretch across to the very bottom of the page.
I messed around with the position in css and the background color did stretch to the bottom of the page, but then my header disappeared.
My CSS...
#headerContainer {
margin: -60px 0px 0px 0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
}
.editCommentBody {
margin: 60px 0px 40px 0px;
height: 100%;
text-align: center;
background-color: #ddd;
}
The editCommentBody class is everything from the header to the edit button.
you have not set a value for the fixed position in your headerContainer style .
try giving left:value and top:value for it and also , when you use positions , margins wont work sometimes , if your margin even works , it has a top:-60px which cause your header to be out of screen , try this :
#headerContainer {
margin:0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
left:0px;
top:0px;
}
Try adding the desired background color to the body instead, like this:
body { color: #ddd; }
Try using:
box-sizing: border-box;
My website is www.rosstheexplorer.com.
The following code is in my header.php
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
The following code is in Additional CSS
#media screen and (min-width: 660px) {
.mobile-header-img {
display: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
There is usually white space above the header image when viewing the site on desktops. It almost seems as if the white space stays even when the mobile image does not appear.
How can I ensure that there is never any gap between the header image and the top of the page.
Thank you
You have the following media query in custom-css:
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: 400px auto;
padding: 54px 108px;
}
}
The 400px margin is responsible for your header image being pushed so far down the page. Simply remove this to ensure that the header stays at the top of the page.
Alternatively, you can use the shorthand margin of margin: 0 auto 400px; if you would like to keep the margin at the bottom, but remove the marign at the top.
Note that you also have a padding of 54px. If you would like it flush up against the top of the page, you can remove the padding as well, or use padding: 0 108px 54px; to only pad the bottom.
Hope this helps! :)
There is a margin in your .site-Class. It also seems that theses styles are duplicate in different files of your CSS (style.css and a ?cached? custom-css) .
Change your CSS and it should be as expected:
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: 0 auto; /* change to this value or remove this line, it's already inherited from style.css:967 */
padding: 54px 108px;
}
}
Thank you for your suggestions.
In Additional CSS I had
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: 400px auto;
padding: 54px 108px;
}
}
I have now changed it to
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: -50px auto;
padding: 54px 108px;
}
}
I ran in to an issue.
I've made a custom sidebar for a website. this includes a search, a category list and a pricing option.
As you can see up here, it shows it perfectly when inspecting on google chrome.
But when I open the same page on my phone, it does not show up anymore.
This sidebar is supposed to be shown by using the following custom css :
#media only screen and (max-width: 759px) {
#sidebar {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (max-width: 759px) {
#sidebar-3 {
display:block;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_product_search_widget-8 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_price_filter-10 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_product_categories-4 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
Which basically makes sure that on the desktop it has the sidebar on the left (sidebar). Which it hides on phones/tablets and such. And on phone it has the sidebar-3 on the top which is hidden on desktop.
As you can see I even tried to do it by showing sidebar-3 by adding display:block. Sadly to no avail.
I'm using the same code on two other website's, where they work perfectly.
Does anyone have any idea what might be going on here?