Navigation
Archive / css code to make the font the same on all devices
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • March 19, 2017 at 9:10 am #1412765

    mynemesis
    Participant

    hi support

    please refer to this link below

    http://brandcastmedia.com.au/5-rules-to-secure-more-high-end-customers-grel-real-estate-blogs/

    and please refer to the SIDE BAR

    Up on inspecting the page i got the font smaller by adding:

    .x-main .widget, .x-main .widget a, .x-main .widget ul li a, .x-main .widget ol li a, .x-main .widget_tag_cloud .tagcloud a, .x-main .widget_product_tag_cloud .tagcloud a, .x-main .widget a:hover, .x-main .widget ul li a:hover, .x-main .widget ol li a:hover, .x-main .widget_tag_cloud .tagcloud a:hover, .x-main .widget_product_tag_cloud .tagcloud a:hover, .x-main .widget_shopping_cart .buttons .button, .x-main .widget_price_filter .price_slider_amount .button, .x-sidebar .widget, .x-sidebar .widget a, .x-sidebar .widget ul li a, .x-sidebar .widget ol li a, .x-sidebar .widget_tag_cloud .tagcloud a, .x-sidebar .widget_product_tag_cloud .tagcloud a, .x-sidebar .widget a:hover, .x-sidebar .widget ul li a:hover, .x-sidebar .widget ol li a:hover, .x-sidebar .widget_tag_cloud .tagcloud a:hover, .x-sidebar .widget_product_tag_cloud .tagcloud a:hover, .x-sidebar .widget_shopping_cart .buttons .button, .x-sidebar .widget_price_filter .price_slider_amount .button {
    font-size: 14px;
    text-align: center;

    but

    as soon as the screen got smaller (mobile device) the font go back up to the original size.

    I have tried the

    @media (max-width: 979px) css line but no help

    could you please help as i am stuck now 🙂

    March 20, 2017 at 12:45 am #1413242

    Rue Nel
    Moderator

    Hello There,

    Thanks for writing in! I have inspected your page and it turns out that you have some invalid css. Please check this screenshots:
    http://prntscr.com/em3rwy
    http://prntscr.com/em3s4k
    http://prntscr.com/em3sbr
    http://prntscr.com/em3sgk

    Please make sure that your css code is valid so that it will not mess up other styles. And the best css practice should be like this:

    element {
  // your styling
}

#element-ID  {
  // your styling
}

.element-class  {
  // your styling
}

@media(max-width: XXpx){
  element {
    // your styling
  }

  #element-ID  {
    // your styling
  }

  .element-class  {
    // your styling
  }
}

    The @media block should always be at the bottom to avoid any conflict. You will need to indent your code to see the curly braces clearly.

    Hope this helps.

    March 20, 2017 at 4:41 am #1413407

    mynemesis
    Participant

    Thank you support… thank you!

    I’ve fixed the code per instruction but might help missed some curly brackets along the way somewhere that I can’t seem to figure it out.

    The text seem to resized ok but i have added

    font-align: center;

    but it has no affect

    please see copy of the css code starting and see if you could help me please

    
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {

body .woocommerce .col2-set .col-1{width:100%;}
.woocommerce-billing-fields h3{margin-top:14px;}
.woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:left;padding:10px}
#order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:left;width:48%;margin-left:2%;}
.woocommerce-checkout .wc_checkout_add_ons  {
float:left;
padding: 5px
    
   }
}

h3#order_review_heading {
    margin-top: 0;
}
div#wc_checkout_add_ons, div#order_review {
    float: left;
}
div#wc_checkout_add_ons {
		font-size: 18px;
  	color: #f26a21;
}

.woocommerce .onsale,
.woocommerce-page .onsale {
  width: 200px;
  border-radius: 0;
  font-size: 20px;
  background-color: rgb(252, 0, 0);
}

/* WooCommerce Price (Default) */
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
	color: #333333;
	font-size: 1em;
	font-weight: normal;
}

/* WooCommerce Price (From Text) */
.woocommerce ul.products li.product .price .from, .woocommerce-page ul.products li.product .price .from, .woocommerce div.product span.price .from, .woocommerce div.product p.price .from, .woocommerce #content div.product span.price .from, .woocommerce #content div.product p.price .from, .woocommerce-page div.product span.price .from, .woocommerce-page div.product p.price .from, .woocommerce-page #content div.product span.price .from, .woocommerce-page #content div.product p.price .from {
	color: #333333;
	font-size: 0.85em;
	text-trans
  
  
  
  : uppercase;
}

/* WooCommerce Price (Regular Price) */
.woocommerce div.product span.price del, .woocommerce div.product p.price del, .woocommerce #content div.product span.price del, .woocommerce #content div.product p.price del, .woocommerce-page div.product span.price del, .woocommerce-page div.product p.price del, .woocommerce-page #content div.product span.price del, .woocommerce-page #content div.product p.price del, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del, .product-price del, .woocommerce ul.cart_list li .quantity del, .woocommerce-page ul.cart_list li .quantity del, .woocommerce ul.product_list_widget li .quantity del, .woocommerce-page ul.product_list_widget li .quantity del {
	color: #777777;
	font-size: 0.85em;
	text-decoration: line-through;
}

/* WooCommerce Price (Sale Price) */
.woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins, .woocommerce div.product span.price ins, .woocommerce div.product p.price ins, .woocommerce #content div.product span.price ins, .woocommerce #content div.product p.price ins, .woocommerce-page div.product span.price ins, .woocommerce-page div.product p.price ins, .woocommerce-page #content div.product span.price ins, .woocommerce-page #content div.product p.price ins, .product-price ins, .woocommerce ul.cart_list li .quantity ins, .woocommerce-page ul.cart_list li .quantity ins, .woocommerce ul.product_list_widget li .quantity ins, .woocommerce-page ul.product_list_widget li .quantity ins {
	color: #333333;
	text-decoration: underline;
}
  
.woocommerce .price > .amount, .woocommerce .price > ins > .amount, .woocommerce .star-rating::before, .woocommerce .star-rating span::before {
  color: rgb(252, 0, 0);
}

div#wc_checkout_add_ons {
    font-size: 18px;
    color: rgb(252, 0, 0);
}
  
.woocommerce div.product .images .onsale {
    top: -25px;
    left: -70px;
}

.woocommerce .onsale, .widget_price_filter .ui-slider .ui-slider-range {
    background-color: rgb(255, 0, 0);
    font-size: 22px;
}
.x-header-landmark {
display: none !important;
}
  
 .x-pricing-column-info .x-price {
    color: #00b9eb;
}

    /* background-color: #00b9eb; */
  .x-accordion-heading .x-accordion-toggle.collapsed {
        background-color: #00b9eb;
}
/* WooCommerce form (Billing box) */
form#checkout input[type=text], form#checkout textarea {
    width: 100%;
}
blockquote {
    margin: 2.15em 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 100%;
    font-weight: 100;
    line-height: 1.6;
    color: #333;
}
  
  
p {
    margin: 0 0 1.0em;
}h
  .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a, .x-breadcrumbs .delimiter {
    color: rgb(255, 255, 255); */
}
  
  
body {
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    color: hsl(0,0%,43%);
    background: hsl(0,0%,100%) url(//theme.co/media/neutral1.png) center top repeat;
   }
}  

@media (max-width: 979px)
body .x-main .widget, body .x-main .widget a, body .x-main .widget a:hover, body .x-main .widget ul li a, body .x-main .widget ol li a, body .x-main .widget ul li a:hover, body .x-main .widget ol li a:hover, body .x-sidebar .widget, body .x-sidebar .widget a, body .x-sidebar .widget a:hover, body .x-sidebar .widget ul li a, body .x-sidebar .widget ol li a, body .x-sidebar .widget ul li a:hover, body .x-sidebar .widget ol li a:hover {
   
    font-size: 14px;
    text-align: center;
}
}
    March 20, 2017 at 9:12 am #1413664

    Nabeel A
    Moderator

    Hi again,

    There were couple of syntax errors and missing brackets and extra brackets, I fixed them, use this CSS now:

    /* Large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {

body .woocommerce .col2-set .col-1{width:100%;}
.woocommerce-billing-fields h3{margin-top:14px;}
.woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:left;padding:10px}
#order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:left;width:48%;margin-left:2%;}
.woocommerce-checkout .wc_checkout_add_ons  {
float:left;
padding: 5px
    
   }
}

h3#order_review_heading {
    margin-top: 0;
}
div#wc_checkout_add_ons, div#order_review {
    float: left;
}
div#wc_checkout_add_ons {
		font-size: 18px;
  	color: #f26a21;
}

.woocommerce .onsale,
.woocommerce-page .onsale {
  width: 200px;
  border-radius: 0;
  font-size: 20px;
  background-color: rgb(252, 0, 0);
}

/* WooCommerce Price (Default) */
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
	color: #333333;
	font-size: 1em;
	font-weight: normal;
}

/* WooCommerce Price (From Text) */
.woocommerce ul.products li.product .price .from, .woocommerce-page ul.products li.product .price .from, .woocommerce div.product span.price .from, .woocommerce div.product p.price .from, .woocommerce #content div.product span.price .from, .woocommerce #content div.product p.price .from, .woocommerce-page div.product span.price .from, .woocommerce-page div.product p.price .from, .woocommerce-page #content div.product span.price .from, .woocommerce-page #content div.product p.price .from {
	color: #333333;
	font-size: 0.85em;
	text-transform: uppercase;
}

/* WooCommerce Price (Regular Price) */
.woocommerce div.product span.price del, .woocommerce div.product p.price del, .woocommerce #content div.product span.price del, .woocommerce #content div.product p.price del, .woocommerce-page div.product span.price del, .woocommerce-page div.product p.price del, .woocommerce-page #content div.product span.price del, .woocommerce-page #content div.product p.price del, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del, .product-price del, .woocommerce ul.cart_list li .quantity del, .woocommerce-page ul.cart_list li .quantity del, .woocommerce ul.product_list_widget li .quantity del, .woocommerce-page ul.product_list_widget li .quantity del {
	color: #777777;
	font-size: 0.85em;
	text-decoration: line-through;
}

/* WooCommerce Price (Sale Price) */
.woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins, .woocommerce div.product span.price ins, .woocommerce div.product p.price ins, .woocommerce #content div.product span.price ins, .woocommerce #content div.product p.price ins, .woocommerce-page div.product span.price ins, .woocommerce-page div.product p.price ins, .woocommerce-page #content div.product span.price ins, .woocommerce-page #content div.product p.price ins, .product-price ins, .woocommerce ul.cart_list li .quantity ins, .woocommerce-page ul.cart_list li .quantity ins, .woocommerce ul.product_list_widget li .quantity ins, .woocommerce-page ul.product_list_widget li .quantity ins {
	color: #333333;
	text-decoration: underline;
}
  
.woocommerce .price > .amount, .woocommerce .price > ins > .amount, .woocommerce .star-rating::before, .woocommerce .star-rating span::before {
  color: rgb(252, 0, 0);
}

div#wc_checkout_add_ons {
    font-size: 18px;
    color: rgb(252, 0, 0);
}
  
.woocommerce div.product .images .onsale {
    top: -25px;
    left: -70px;
}

.woocommerce .onsale, .widget_price_filter .ui-slider .ui-slider-range {
    background-color: rgb(255, 0, 0);
    font-size: 22px;
}
.x-header-landmark {
display: none !important;
}
  
 .x-pricing-column-info .x-price {
    color: #00b9eb;
}

    /* background-color: #00b9eb; */
  .x-accordion-heading .x-accordion-toggle.collapsed {
        background-color: #00b9eb;
}
/* WooCommerce form (Billing box) */
form#checkout input[type=text], form#checkout textarea {
    width: 100%;
}
blockquote {
    margin: 2.15em 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 100%;
    font-weight: 100;
    line-height: 1.6;
    color: #333;
}
  
  
p {
    margin: 0 0 1.0em;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a, .x-breadcrumbs .delimiter {
    color: rgb(255, 255, 255);
}
  
  
body {
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    color: hsl(0,0%,43%);
    background: hsl(0,0%,100%) url(//theme.co/media/neutral1.png) center top repeat;
}  

@media (max-width: 979px) {
body .x-main .widget, body .x-main .widget a, body .x-main .widget a:hover, body .x-main .widget ul li a, body .x-main .widget ol li a, body .x-main .widget ul li a:hover, body .x-main .widget ol li a:hover, body .x-sidebar .widget, body .x-sidebar .widget a, body .x-sidebar .widget a:hover, body .x-sidebar .widget ul li a, body .x-sidebar .widget ol li a, body .x-sidebar .widget ul li a:hover, body .x-sidebar .widget ol li a:hover {
   
    font-size: 14px;
    text-align: center;
}
}

    Let us know how this goes!

    March 20, 2017 at 2:59 pm #1414114

    mynemesis
    Participant

    thank you support for fixing the code for me…

    it seems like those curly brackets are my nemesis

    March 20, 2017 at 3:26 pm #1414148

    Joao
    Moderator

    Glad to hear we managed to help.

    Let us know if we can help with anything else.

    Joao

  • Author
    Posts