-
Posts
-
Hi,
I’m looking to get help on here on a number of issues that I’m experiencing with Enfold. Here they are:1. Background image on color section not scaling – If you take a look at the attached image, you will see that I have laid this out in PS. Each of the sections, events, parties, etc have their own color section with a background image. If you look at the development site you will see that the images are not showing up properly.
The images are are currently sized to 1500 x 577 and then uploaded. For whatever reason, the background image is not showing up completely even when I select the image option to be FULL SIZE when I select the image for the background.
As result the images are blurry and not as crisp as I like them to be.
2. In the GAMES section (of the mockup image) you will see a blue background surrounding the text. I was wondering if how this can be replicated with minimal to no code.
3. In the EVENTS section (of the mockup image), you will see the text is to moved to the right. I’m currently using the text tool but need to help in understanding on how to shift it to the right and still keep it centered.
Thanks for your help…I look forward to your answers.
I’ve resolved #2, but I still need help with #1 and #3.
For #1, to be clear, I need to the image to be shown crisply which means that the image is not cutoff (which it is right now) and it also needs to resize when shown on a smaller screen.
For #3, if you view it on the phone, the text is not showing up there.
Here is the current CSS that is used:div.transbox-events {
margin-left:64%;
width: 66%;
height: 38%;
padding: 40px;
background-color: #000000;
opacity: 0.8;
filter: alpha(opacity=60); /* For IE8 and earlier */
}The margin-left is set to 64% so that box will float to the right hand side of the screen. I think there is a better way to do this to have the box float on the right hand side, yet still show up when it is on a mobile phone screen.
Thanks I look forward to your response.
Hey!
Background images on color sections are sized based on the choice you make for that specific color section and then based on the users screen size when they view your site. Select the options for the image background on that color section appropriate for how you want it to look. For example, setting the position to “center center” and background repeat to “no repeat” will put the image in the middle of the color section at whatever size it was added in.
For #3, there are a couple of different ways to do that but each needs some custom css. The gist of it would be to wrap the text in a class and then give that class padding. You could then position the class inside of the code block or text block if you are using one by making it float:right or something like that.
This is somewhat how you have it now but with everything as a percent it needs a parent container that you are also controlling. I would suggest using a fixed value for the text box and a 50% width parent container instead. Then use a media query to make the 50% width parent container switch to full width below tablet size (which is what the columns do).
Regards,
Devin
- You must be logged in to reply to this topic.