How to solve problem with pixelated phrase titles in the slider image?

Hey!

Yes, the browser scales the image based on the screen resolution and the image resolution and this can result into blurry text. I recommend to use an image without text and to place a textbox/headline element into the color section if you want a “crispy clear” text on all devices.

Best regards,
Peter

Hi!

No, the color section is a different layout element and you can’t use it with the fullsize slider. If you want to use the fullsize slider try to upload the images without text and then use the caption field: http://www.clipular.com/c/4517275432386560.png?k=K1irCtRM5LpYNCfcsjjnoQ7DEB4

Also make sure that the image size option is set to: “No Scaling (Original Width X Original Height)”: http://www.clipular.com/c/5676108074713088.png?k=U4hE-J4f8ArNGy6onVW3VH8m5_8

Best regards,
Peter

Hi!

Ok, I installed Slider Revolution on a test site running Enfold 2.7.

I then configured my Slider Settings to match your image dimensions on your page: http://soapmarine.com/boccamoka/fullscreen/

Here is how I set them:
Title: Whatever you want
Alias: Whatever you want
Source Type: Gallery
Slider Layout: Full Screen
Min. Fullscreen Height: Left Blank
FullScreen Align: OFF
Force Full Width: OFF

Full Screen Slider Checked.
Grid Settings – Grid Width: 1490 (your image width) Grid Height: 768 (your image height). I didn’t add (px) to the end of the numbers.

I left most settings on the right side default. I did change:
Appearance –
Shadow Type: No Shadow
Show Timer Line : Hide

Navigation –
Navigation Type: None
The rest as default

I then saved my slider settings and created my slide. I used your background image of 1490 x 768 which took up the whole background area of my newly created slider, I then added your overlay text image as an image layer.

I then wanted to put it on a page, and do so without editing a php template.. so here is what I did:

I created new page, my settings were:
Template: Default Template
Layout: No Sidebar
Title Bar Settings: Hide both
Activate Header Transparency: Transparent Header
Footer Settings: Don’t display the socket & footer

After I had my page set up I loaded up the Advanced Layout Editor, I then added a “Color Section” layout element. Within that “Color Section” I added a text block. In The text block I had a choice in the top right corner for “visual” or “Text”. I chose text. I then inserted my Revolution Slider Shortcode that looked like this: [rev_slider name-of-slider-alias]

This is probably where you got to.

The next thing I did was view the front page, and my site looked the same as yours.. it was confined to the container.
So Then I viewed the source code to find the body page id for the page. In your case on the page you linked to: http://soapmarine.com/boccamoka/fullscreen/ has this as it’s body class: page-id-104

Each page in WordPress, depending on how the theme is coded will have it’s page id in the body class.. thankfully Enfold does.. which means I could then change a couple of lines of CSS based on that single page.. and get the Slider Revolution to go full screen and width.

So, I added these lines of code. You can add them to your child theme, or to the custom.css file within enfold itself, or even to the quick css under Enfold / General. So based on your site using the link above and the body class I mentioned..

body.page-id-104 .container {width: 100%!important; margin: 0 auto;}
body.page-id-104 #header_main {max-width:1030px; margin: 0 auto;}
body.page-id-104 .content {padding-top: 0px!important; padding-bottom: 0px!important; margin-top: -2px!important;}

The first line of CSS, changes the container width to 100% instead of 1030px;
The Second Line of CSS, makes the header go back to it’s 1030px max-width.
The Third LIne Removes the default top and bottom padding of 50px and removes a 2px margin from one of the inner elements.

This Should then make the slider full screen for you as long as you follow the directions above setting up the page and the slider.

Here is a screenshot of my demo of your slider:
https://dl.dropboxusercontent.com/u/21724593/Rev-Slider-Enfold.png

Notice the menu is still centered and not full width, but the slider expands past it.
And here is a screenshot of your demo, where I added the code via css in chrome inspector. The only problem is the slider doesn’t realize the page is resizing.. so it didn’t change to full width.. but you can see that the code should work for you once you add it and refresh the page.
https://dl.dropboxusercontent.com/u/21724593/Rev-Slider-His%20Site%20Demo.png

Regards,
Chris

• This reply was modified 10 years, 7 months ago by Chris.