stellamaris5

My current Custom field CSS:

.navbar-wrapper .navbar h2, h2.site-description {
/* Change (red) font color      */
color:          purple;
/* Change (Raleway) font family */
font-family:    Raleway;
/* Change (20px) font size      */
font-size:      13px;
/* Change (19%) move to left    */
padding-right:  0%;
/* Change (normal) italic-normal-oblique */
font-style:    normal;
}

.site-description:after {
content:    "07739 188 652";
display:    block;
padding-right:  0%;
color:          purple;
}

/* slider text background and radius box corners */
.carousel-caption {
background: rgba(0, 0, 0, 0.0);
border-radius:    10px 10px 10px 10px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

header.tc-header {
border-bottom: 0;
}

/* Remove grey bar  */
footer#footer {
border-top:     none;
}

/* Reduce whitespace  */
#main-wrapper {
margin-bottom:  20px;
}

/* Remove the icon and category archives header*/
header.archive-header {
display: none;
}

/* Remove the icon before post titles */
.format-icon:before {
display: none;
}

.btn-navbar {
width:          60px;
height:         30px;
vertical-align: top;
}

.btn-navbar:after {
content:        "Menu";
float:          right;
margin:         -5px 0 0 0;
}

/* Change (red) color */
.comments-link .fs1 {
color: green;
}

/* Set the color (red) of the body, wrapper, header & footer */
body, #main-wrapper, header.tc-header, footer#footer .colophon {
background-color: #FFF;
margin-top:     5px;
margin-bottom:  20px;
}

/*SQUARE PICTURES AND WHITE BACKGROUND*/
.round-div {
  border: 104px solid #FFFFFF;
  border-radius: 0px;
  display: block;
  height: 170px;
  left: -54px;
  position: absolute;
  top: -66px;
  transition: all 0.3s ease 0s;
  width: 170px;
  z-index: 99;
}

.widget-front .round-div,
.thumb-wrapper .round-div {
  border-color: #FFF;
  border-radius: 0px;
}
@media (max-width: 979px) {
    .widget-front .round-div,
    .thumb-wrapper .round-div {
        border-color: #FFF;
    }
    .span9.article-container .round-div {
        border-color: #FFF;
    }
}
@media (max-width: 480px) {
.tc-content.span8 {
  left: 60px;
  position: relative;
}
.entry-summary > p {
  padding-right: 50px;
}
}

/*Remove in comments the -- "You may use these HTML tags and attributes:.."*/

.form-allowed-tags {
  display:  none;
}

My current style.css:

/*
Theme Name:     Customizr Child
Theme URI:      https://themesandco.com/customizr
Description:    A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr's core code. In order to keep your code as clean and flexible as possible, try to use Customizr's hooks API for your customizations. Do something awesome and have fun !
Author:         Nicolas Guillaume (nikeo)
Author URI:     https://themesandco.com
Template:       customizr
Version:        1.0.0
*/

/* Your awesome customizations start right here !
-------------------------------------------------------------- */

body {
font-family: 'Raleway', sans-serif;
}

/* Change Slider Titles (2em) font-size, (Garamond) family, (red) color */
.carousel-caption h1 {
font-family:    Raleway;
font-size:      1.5em;
color:		grey;
}
.carousel-caption p {
font-family:    Raleway;
font-size:      1.5em;
color:		white;
}
.carousel-caption .btn {
font-family:    Raleway;
font-size:      1em;
color:		white;
}

/* my-nav-menu-search menu item created in functions.php. Move it way over to the right */
.notresp.navbar .nav .my-nav-menu-search {
    float: right;
}
.notresp.navbar .nav {
    width: 100%;
}

/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
    background: transparent;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
    width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 60px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
    font-family: 'genericons';
    content: '\f400';
    position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: normal;
    padding-top: 5px; /* tune this vertical alignment inside the search field, as needed */
    padding-left: 5px; /* tune this horizontal alignment inside the search field, as needed */

}

/* START OF Center Header Block Items (Needs additional php code in Child Theme functions.php) */
/* STEP 1 */
.brand.span12 {
float:              none;
}

/* STEP 2 */
/* OPTION 1/2 - CENTER TAGLINE */
.tc-header .outside {
display:            block;
text-align:         center;
}
.site-description {
margin:             0px 0px;
}
.inside.site-description {
display:            none;
}

/* STEP 3 */
/* OPTION 1/2 - CENTER SOCIAL ICONS */
.social-block {
text-align:         center;
position:           relative;
z-index:            1;
}

/* OPTION 2/2 - HIDE SOCIAL ICONS */
.social-block.span12 {
display:            none;
}

/* STEP 4 */
/* OPTION 1/1 - CENTER MENU */
.navbar-wrapper .navbar.notresp {
float:              none;
width:              90%;
margin:             0 auto;
}

/* Variable number of floating elements */
.navbar-wrapper .navbar.notresp .nav        {
float:              none;
width:              100%;
text-align:         center;
}

.navbar-wrapper .navbar.notresp .nav > li   {
float:              none;
display:            inline-block;
}

/* Fix 2nd level <li>s  */
.navbar-wrapper .navbar.notresp .nav > li .dropdown-menu li {
float:              left;
width:              100%;
text-align:         left;
}

/* Adjust margin/padding */
.navbar-wrapper .navbar.notresp .navbar-inner {
margin:             0px 0px;
padding:            0px 0px;
}

/* STEP 5 */
/* OPTION 1/1 - HIDE NAVBAR BOX */
.navbar-wrapper .navbar.notresp .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow:    none;
box-shadow:         none;
background:         none;
-webkit-box-shadow: none;
-moz-box-shadow:    none;
box-shadow:         none;
}

/* STEP 6 */
/* RESPONSIVENESS */
@media (max-width: 979px) {
.tc-header .brand   {
width:              auto;
}
.row-fluid .offset1:first-child {
margin-left:        0;
}
}
/* END OF Center Header Block Items (Needs additional php code in Child Theme functions.php) */

sorry , I don’t have the code in my style.css nor in my Custom CSS field

is the above OK?

[url=https://postimg.org/image/5rvofw3cr/][img]https://s9.postimg.org/5rvofw3cr/photo_1.png[/img][/url]

[url=https://postimg.org/image/wofno7m63/][img]https://s9.postimg.org/wofno7m63/photo_2.png[/img][/url]

just what I was looking for! Brilliant thanks!

ElectricFeet, I will upload some screenshots once I find a way.

It’s not a specific page I have a problem with, if you go to natureheals.co.uk and type for instance ‘Acupuncture’ in the search box , the results listed is the issue. If you do it on a desktop browser ( I am going it in Safari) the pictures look great, white background, zoom nicely etc.

If you do the same thing on a browser in iOS , in portrait it is fine as the results and picture stack on top of one another (only thing is you start to have to scroll left and right to see them alternating fully) and landscape is even worse as the pictures go over the text and I can see a faint black border on two sides.

Can I upload screenshots here?

do I really need to start a new thread and explain everything again? ??

Hi. Me again.

Not sure what’s going on but I went back to the site and it’s not quite right again. It looked ok before not sure what happened.

I have the last code above in custom CSS and now the images again overlap the text and have a faint black line as border around them in mobile browser on landscape.

Looks good in portrait however the whole page is wider so you have to scroll left right with alternating search results as the pictures are left-right-left-right. Hope this makes sense.

THANK YOU THANK YOU THANK YOU

GENUISSSSSSS!!!!!

This is what I have inside the Custom CCC field all works now:

/*SQUARE PICTURES AND WHITE BACKGROUND*/
.round-div {
  border-color: #FFF;
  border-radius: 0;
}

.widget-front .round-div,
.thumb-wrapper .round-div {
  border-color: #FFF;
  border-radius: 0;
}
@media (max-width: 979px) {
    .widget-front .round-div,
    .thumb-wrapper .round-div {
        border-color: #FFF;
    }
    .span9.article-container .round-div {
        border-color: #FFF;
    }
}
@media (max-width: 480px) {
.tc-content.span8 {
  left: 60px;
  position: relative;
}
.entry-summary > p {
  padding-right: 50px;
}
}

One more thing, now the pictures have a white background even on mobile , but the picture frame goes over the text when the mobile device is held in landscape, when it is in portrait it is fine, can the boxes be made transparent instead of white as it were?

to summarize, the code I have now in Custom CSS field is:

/*SQUARE PICTURES AND WHITE BACKGROUND*/
.round-div {
  border: 104px solid #FFFFFF;
  border-radius: 0px;
  display: block;
  height: 170px;
  left: -54px;
  position: absolute;
  top: -66px;
  transition: all 0.3s ease 0s;
  width: 170px;
  z-index: 99;
}

.widget-front .round-div,
.thumb-wrapper .round-div {
    border-color: white;
    border-radius: 0;
}
@media (max-width: 979px) {
    .widget-front .round-div,
    .thumb-wrapper .round-div {
        border-color: white;
    }
.span9.article-container .round-div {
  border: 94px solid white;
}
}

.

Yaaaaaay, that did it ?? ?? I’m so happy!!!!

Right, I have add both, my OP code and the code you sent to the custom CSS field one after the other (and removed my original code from the style.css file), cleared by browser cache then checked:

ON desktop it is fine (same as before) but on mobile there are still square grey boxes around the picture before the zoom

(I’ve done FFFFFF instead of FFF)

SO no change at all

Dave, I received an email note from the forums saying to email you but when I logged on this message is gone…not sure…