Text box on home page – positioning lower
-
Hi,
I’m using the Goran theme and have repositioned the text box on the home page to display lower on the background image.
I managed to get the text box to display well for min-widths of 1020px and more, but have struggled to get it to display with min-width of 768px and max-width of 767px.
Suggestions?
From what I discovered in the Goran theme files, the theme developer used a calculation in JavaScript to add inline CSS to the hero with-featured-image div class for wider viewports.
Which makes it challenging to customize the CSS. For example:
<div class="hero with-featured-image" style="padding-top: 361px;">Adding padding-top to the “hero with-featured-image” class for lower widths doesn’t seem to work (at least not for me, so far).
I also tried adding margin-top to .home .entry-content, but it causes issues with the responsive background image on a smartphone. The background image is no longer responsive.
Am I missing something obvious?
The blog I need help with is: (visible only to logged in users)
-
Hi,
I’ve spent the past 1 1/2 days trying to resolve this issue. Anyone out there with suggestions?
-
The article stuff for hero with featured image is within a parent div. Padding will only move it around within that parent div. It would require position: absolute: to move it outside of that parent div (below the image), and that presents problems as it will basically float that element free of the other page elements so it typically would require a number of media queries to adjust the position of it and other elements so they didn’t clash with each other.
-
Thanks. I created a number of media queries, to reposition the box lower. Ran into issues due to the inline CSS created by the theme’s JavaScript, and finally gave up when I couldn’t get smartphones to display correctly. I was able to get tablet and desktop to display correctly.
-
- The topic ‘Text box on home page – positioning lower’ is closed to new replies.
WordPress.com Forums 