[Michael PParticipant]

Hi,

I’m pretty much a beginner so bear with me! Never used Visual Composer, Customizer or any of the other plugins before. I’m doing ok, finding my way around, but progress is inevitably rather slow.

So I’ve begun to build a test site (just a home page for the moment) on a development server:

http://www.jothornejewellery.co.uk

Q1. The page template I’m using for my Renew homepage is “Blank – Container | Header, Footer” and I’m trying to insert two images, side-by-side, full width and responsive, to match the revolution slider image just below the header. How would I do that? How can I make two independent images sit side-by-side but fill the full width of the site, i.e break the boundaries of the container?

Q2. How would I add a button overlaid on top of any rev slider image? Or any image at all for that matter?

Q3. There seems to be a bug with font weights applied in Customizer. When using the Typography settings, the preview version differs from the saved and published version – the fonts are heavier in the published version and I can’t seem to fix it. I’m using the standard Lato font. It’s driving me nuts.

Many thanks,

Michael

[ChristianModerator]

Hey Michael,

1. For that, you need to use Blank – No Container | Header Footer. Then, add a row then that row to have no inner container (see http://prntscr.com/433nft). Next, add two images to that row and add “man” Class and give them an inline Style of width:50% (see http://prntscr.com/433no0). For the rest of the row, enable the Inner Container.

2. For Rev Slider button, you need to add a New Layer and paste your button shortcode in the HTML box (see http://prntscr.com/433olk). For images, you can set up your image as a background for your column and add a button to that column. Or, you can add an image and button to the column and position the button using CSS.

3. Can you give us a screenshot of the difference?

For more details on how to use X Shortcodes or Visual Composer Elements, please see our Knowledge Base.

Hope that helps. 🙂

[Michael PParticipant]

Thanks – I’ll try your suggestions.

Two screenshots – look at the button text in these examples. The first is s how it looks in customiser, the second is the way it renders in any browser window:

http://prntscr.com/438381

http://prntscr.com/4382wq

[Michael PParticipant]

Apologies I should have replied after trying the suggestions, and for some reason I couldn’t edit it.

I tried your advice for Q1, and I’ve made some progress. The two images near the footer are now sitting side-by-side and full width, whilst the three above remain centered and contained. However the two side-by-side full width images are not behaving as I’d like them to. They are acting as if they are one image, and not responsively stacking into a single column at smaller browser window sizes:

http://www.jothornejewellery.co.uk

Once again, here are the screenshots showing the font weight problem – look at the button text in these examples. The first is how it looks in customiser, the second is the way it renders in any browser window:

http://prntscr.com/438381

http://prntscr.com/4382wq

Thanks!

[RadModerator]

Hi Michael,

Do you have installed Lato font from your local machine? The browser probably picking this up.

For the meantime, try adding this css at your customizer’s custom css.

.x-content-band {
-webkit-font-smoothing: antialiased !important;
}

For two side by side image, adding style=”width:50%;” will directly alter its width, forcing it to have that width and it will not stack.

What you must do is using class names.

Example, add side-by-side class to your image, then add this css at your customizer’s custom css.

.side-by-side {
   display: block;
}
@media( min-width: 768px){
.side-by-side {
width: 50%;
}
}

Thanks!

[Michael PParticipant]

Thanks for your help.

Q1. I don’t have the Lato font installed on my machine, so this is not the problem. The .x-content band css did not solve it – the text is still showing up too heavy. I’ve checked this on two different machines.

Q2. Meanwhile, I tried adding the side-by-side class to my images, and adding the suggested custom css. This resulted in the images stacking on top of each other regardless of window size. I have no knowledge of css so I did a bit of random playing, combined with some googling.

Eventually I ended up with the code below, which kind of works. I had to name the images e.g. “process” and “story”. There is probably some unnecessary code in there, maybe you could check the behaviour and point out what I should remove? I also want a narrow vertical space between the images, at the moment they are butted up next to each other when they are side by side:

.side-by-side {
display: block;
}
@media (min-width: 960px) {
.side-by-side {
height: auto; overflow: hidden; // clearing
}
#process { width: 50%; float: left; }
#story { width: 50%; }
}
}

Q3. The button shortcode does not work properly when entered in the rev slider. The button does not conform to the defaults set in the customiser – it remains the same size even when the code is changed to “x-large” or “jumbo” in the slider layer. It also behaves differently in terms of responsiveness when compared to normal buttons.

Many thanks again for your assistance.

[ZeshanMember]

Hi Micheal,

Q1. I have tested in many browsers, the font is showing just fine (see: http://prntscr.com/43lj2t). So can you tell us which browser and OS are you using? Also try adding the following CSS code to your Customizer > Custom > CSS and see if that solves the problem:

#x-content-band-4 .x-btn.x-btn-square {
   font-weight: normal !important;
}

Q2. The method you have used is correct. However if you want to clean it a bit, you can use the following CSS code instead of the one you have added:

.side-by-side {
   display: block;
}

@media (min-width: 960px) {
   .side-by-side {
      height: auto; overflow: hidden; // clearing
      width: 50%;
   }
   #process {float: left; }
}

Q3. It is because we have the limited sizes for buttons in Rev Slider. But you can surely add your own custom size using CSS inside Customizer > Custom > CSS:

.rev_slider_wrapper .x-btn {
   padding: 0.963em 1.95em 0.913em !important;
   font-size: 16px !important;
   font-size: 1.9rem !important;
}

Hope this helps. 🙂

Thank you.

[Michael PParticipant]

I’m using Safari, Chrome and Firefox on a Mac in 10.9.3 – the fonts show up heavy in all three. I will try these suggestions, many thanks.

With the slider button, currently I’m having to add the code in a layer on each slide. Is there a global way around this? It seems that you should be able to add just one button for the whole slider, but I can’t find a setting that allows this.

Michael

[ZeshanMember]

Hi Micheal,

Let us know how it goes 🙂

Regarding the slider button, unfortunately at this time there is no way to add a single button to the whole slider. However In the meantime you could try creating a slide and adding a button to it. Next you can simply duplicate it several times. That way it will save your time to add the same button separately to all other slides.

Hope this helps. 🙂

Thank you.

[Michael PParticipant]

Hi,

Q1. The custom css suggested for customising the slider button had no effect whatsoever, regardless of parameter. Are you sure this is the correct code? I’ve tried inspecting the element myself but I can’t work out the correct classes.

Q2. I’m also looking for a way to make the main rev slider below the masthead more sophisticated in terms of responsiveness. Because it is a full-width “widescreen format” image, it does not look good at smaller browser sizes and on mobile devices. Is there a way to create a break point so that the image switches to a different aspect ratio for tablets and mobiles etc? Or perhaps a workaround using a method other than the rev slider for displaying the images?

Many thanks,

Michael

[RadModerator]

Hi Michael,

It should work, but can’t check it now. Your site is now on maintenance mode. Would you mind providing an admin login?

Thanks!

[Michael PParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Michael,

1. Please try

.tp-caption x-btn.x-btn-square {
   font-weight: normal !important;
}

2. We’d love to help you with this but since there are a lot of variables that come into play when it comes to responsive design, this falls beyond our scope of support.

Thank you for understanding.

[Michael PParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi MP,

#1. Upon checking, the custom CSS you have used in your website is having some extra “}” curly braces that are causing the rest of the CSS not to work (see: http://prntscr.com/455xd5).

To fix this, replace all of your custom CSS from Customizer > Custom > CSS with:

.site {
background-color: #f6f6f6 !important;
letter-spacing: 2px
}
.view-collection {
display: block;
margin: auto;
max-width: 350px;
min-width; 250px;

}
.side-by-side {
   display: block;
}
@media (min-width: 960px) {
.side-by-side {
height: auto;
padding: 2px
}
#process { width: 50%; float: left; }
#story { width: 50%; }
}

Next add the following CSS code for slider’s button:

.tp-caption .x-btn.x-btn-square {
   font-weight: normal !important; 
}

It should work now, if you don’t see any change, you can simply add any other styling like font-size: 10px !important; to test and it should work.

#3. Add the following CSS code in Customizer > Custom > CSS:

.slotholder:before {
   content: '';
   height: 100%;
   width: 100%;
   z-index: 1;
   position: absolute;
   background: url(LINES_IMAGE_URL_GOES_HERE);
}

Replace LINES_IMAGE_URL_GOES_HERE with your lines image’s URL.

Cheers!

[Author]

Posts